/*
 * @relay/ui — Design Tokens (app-v35)
 * v3.5 neutral-first — source: relay-creative/briefs/BRIEF.interface-v35.md · 7HZQAX
 *
 * SINGLE SOURCE OF TRUTH: this file now @imports the canonical brand token set
 * (brand/relay-tokens-v35.css, the --rly-* names) and re-exposes the unprefixed
 * app-v35 names (--bg, --surface, --accent-ui, …) as ALIASES of the canonical
 * values. One place defines the palette; both the brand pages (--rly-*) and the
 * app screens (unprefixed) read the same ground truth, including the dark-mode
 * flip (the canonical file flips --rly-* under [data-theme="dark"] +
 * prefers-color-scheme, and the aliases inherit that flip automatically).
 *
 * The handful of tokens whose app value differs from its --rly-* cousin, or has
 * no cousin at all, keep their literal definition (flagged inline below):
 *   --teal-dim / --teal-glow  (app uses low-alpha teal washes; --rly-teal-dim is a solid tint)
 *   --indigo-dim              (app alpha differs from the solid --rly-indigo-dim)
 *   --radius (8px, canonical --rly-radius is 6px) · --radius-lg (10px, no cousin)
 *   --sidebar-w (220px, canonical --rly-sidebar-w is 224px) · --topbar-h (no cousin)
 */

@import url("/brand/relay-tokens-v35.css");

:root {
  /* ── Backgrounds (neutral) — alias canonical ─────────────────── */
  --bg:          var(--rly-bg);
  --surface:     var(--rly-surface);
  --panel:       var(--rly-panel);
  --deep:        var(--rly-deep);

  /* ── Borders — alias canonical ───────────────────────────────── */
  --border:      var(--rly-border);
  --border-hi:   var(--rly-border-hi);
  --border-input:var(--rly-border-input);

  /* ── Text — alias canonical ──────────────────────────────────── */
  --text:        var(--rly-text);
  --text-2:      var(--rly-text-2);
  --text-muted:  var(--rly-text-muted);
  --text-faint:  var(--rly-text-faint);
  --text-bright: var(--rly-text-bright);

  /* ── Brand accent — alias canonical (split by role) ──────────── */
  --teal:        var(--rly-accent-ui);   /* legacy alias of --accent-ui */
  --accent:      var(--rly-accent-ui);   /* legacy alias — call sites predating the role split */
  --accent-ui:   var(--rly-accent-ui);
  --accent-text: var(--rly-accent-text);
  --accent-fill: var(--rly-accent-fill);
  --on-accent:   var(--rly-on-accent);
  --accent-tint: var(--rly-accent-tint);
  --indigo:      var(--rly-indigo);

  /* Literal — no matching --rly-* value (kept verbatim; dark override below) */
  --teal-dim:    rgba(13,148,136,0.08);
  --teal-glow:   rgba(13,148,136,0.04);
  --indigo-dim:  rgba(99,102,241,0.08);
  /* Motion accent — brighter cyan-teal for animated strokes + the logomark
     ONLY. Never a fill, never text, never a static surface. Constant across
     themes (a moving mark, WCAG-exempt). See DESIGN.md §2 Motion Accent. */
  --accent-motion: #00d9c8;

  /* ── Semantic — alias canonical ──────────────────────────────── */
  --success:     var(--rly-success);
  --warning:     var(--rly-warning);
  --error:       var(--rly-error);

  /* ── Shape ───────────────────────────────────────────────────── */
  --radius:      8px;                    /* literal — canonical --rly-radius is 6px */
  --radius-sm:   var(--rly-radius-sm);
  --radius-lg:   10px;                   /* literal — no --rly-* cousin */
  --radius-full: var(--rly-radius-full);

  /* ── Typography — alias canonical ────────────────────────────── */
  --font:        var(--rly-font);
  --display:     var(--rly-font-display);
  --mono:        var(--rly-font-mono);

  /* ── Layout (app-specific; no --rly-* cousins) ───────────────── */
  --sidebar-w:   220px;                  /* literal — canonical --rly-sidebar-w is 224px */
  --topbar-h:    52px;
}

/* ── Dark mode ────────────────────────────────────────────────────
   Every aliased token above inherits the canonical --rly-* dark flip
   automatically. Only the three literal washes (no --rly-* cousin) need
   an explicit dark override here to preserve the v3.4→v3.5 dark story. */

[data-theme="dark"] {
  --teal-dim:    rgba(45,212,191,0.08);
  --teal-glow:   rgba(45,212,191,0.04);
  --indigo-dim:  rgba(99,102,241,0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --teal-dim:    rgba(45,212,191,0.08);
    --teal-glow:   rgba(45,212,191,0.04);
    --indigo-dim:  rgba(99,102,241,0.12);
  }
}

/* ── Base reset ───────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── A11y baseline (v3.5) ─────────────────────────────────────────
   App-v35 focus ring is a 2px teal outline + offset. The imported canonical
   sheet also carries a :focus-visible rule (a 3px box-shadow ring); box-shadow:
   none here neutralizes it so the visible focus stays exactly the app's ring. */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ui);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}