/*
 * @relay/ui — Design Tokens
 * v3.5 neutral-first — source: relay-creative/briefs/BRIEF.interface-v35.md · 7HZQAX
 * Supersedes v3.4.2 (single #2dd4bf both themes — failed WCAG on light).
 *
 * Canonical names: --teal, --surface, --panel etc. (no prefix). Light is primary.
 * Neutral-first: surfaces are neutral (teal tint retired); brand teal is a LAYER
 * on touch points only. Accent split by role so contrast is correct per use:
 *   --accent-ui   icons/rings/marks/fills   (3.7:1 non-text)
 *   --accent-text links, Codes as text      (5.5:1, AA)
 *   --accent-fill button bg + --on-accent    (ratified #0d9488 — swap to #0f766e for strict AA)
 * Dual teal identity: #0d9488 light / #2dd4bf dark. Dark fills use the ink-flip
 * --on-accent (#0d1514); white-on-teal is 1.9:1 and must never be used.
 */

:root {
  /* ── Backgrounds (neutral) ───────────────────────────────── */
  --bg:          #ffffff;
  --surface:     #f7f7f7;
  --panel:       #efefef;
  --deep:        #e4e4e4;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:      #e2e2e2;
  --border-hi:   #cfcfcf;
  --border-input:#6e6e6e;   /* form inputs — 5.1:1 vs bg (AA non-text) */

  /* ── Text ────────────────────────────────────────────────── */
  --text:        #111111;
  --text-2:      #444444;
  --text-muted:  #616161;   /* 6.2:1 — AA; use for placeholders */
  --text-faint:  #9a9a9a;   /* disabled / decorative ONLY (WCAG-exempt) */
  --text-bright: #111111;

  /* ── Brand accent — touch points only ────────────────────── */
  --teal:        #0d9488;   /* legacy alias of --accent-ui */
  --accent:      var(--accent-ui);  /* legacy alias — call sites predating the role split */
  --accent-ui:   #0d9488;
  --accent-text: #0f766e;
  --accent-fill: #0d9488;
  --on-accent:   #ffffff;
  --accent-tint: #ccfbf1;
  --teal-dim:    rgba(13,148,136,0.08);
  --teal-glow:   rgba(13,148,136,0.04);
  --indigo:      #6366f1;
  --indigo-dim:  rgba(99,102,241,0.08);

  /* ── Semantic (text-AA on white) ─────────────────────────── */
  --success:     #15803d;
  --warning:     #b45309;
  --error:       #dc2626;

  /* ── Shape ───────────────────────────────────────────────── */
  --radius:      8px;
  --radius-sm:   4px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────────────────────── */
  --font:        'Outfit', system-ui, sans-serif;
  --display:     'Cormorant Garamond', Georgia, serif;
  --mono:        'JetBrains Mono', monospace;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-w:   220px;
  --topbar-h:    52px;

}

/* ── Dark mode (contrast mode; canonical orientation) ────────── */

[data-theme="dark"] {
  --bg:          #0d0d0d;   /* canvas darkest */
  --surface:     #181818;   /* cards lighter */
  --panel:       #222222;
  --deep:        #2a2a2a;
  --border:      #2a2a2a;
  --border-hi:   #3a3a3a;
  --border-input:#707070;
  --text:        #e0e0e0;
  --text-2:      #a3a3a3;
  --text-muted:  #8f8f8f;
  --text-faint:  #606060;
  --text-bright: #f0f0f0;
  --teal:        #2dd4bf;
  --accent:      var(--accent-ui);
  --accent-ui:   #2dd4bf;
  --accent-text: #2dd4bf;
  --accent-fill: #2dd4bf;
  --on-accent:   #0d1514;   /* INK FLIP — 9.9:1. Never white on teal (1.9:1). */
  --accent-tint: rgba(45,212,191,0.12);
  --teal-dim:    rgba(45,212,191,0.08);
  --teal-glow:   rgba(45,212,191,0.04);
  --indigo:      #818cf8;
  --indigo-dim:  rgba(99,102,241,0.12);
  --success:     #4ade80;
  --warning:     #fbbf24;
  --error:       #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:          #0d0d0d;
    --surface:     #181818;
    --panel:       #222222;
    --deep:        #2a2a2a;
    --border:      #2a2a2a;
    --border-hi:   #3a3a3a;
    --border-input:#707070;
    --text:        #e0e0e0;
    --text-2:      #a3a3a3;
    --text-muted:  #8f8f8f;
    --text-faint:  #606060;
    --text-bright: #f0f0f0;
    --teal:        #2dd4bf;
    --accent:      var(--accent-ui);
    --accent-ui:   #2dd4bf;
    --accent-text: #2dd4bf;
    --accent-fill: #2dd4bf;
    --on-accent:   #0d1514;
    --accent-tint: rgba(45,212,191,0.12);
    --teal-dim:    rgba(45,212,191,0.08);
    --teal-glow:   rgba(45,212,191,0.04);
    --indigo:      #818cf8;
    --indigo-dim:  rgba(99,102,241,0.12);
    --success:     #4ade80;
    --warning:     #fbbf24;
    --error:       #f87171;
  }
}

/* ── 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) ─────────────────────────────────────── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ui);
  outline-offset: 2px;
  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;
  }
}