/*
 * Relay Design System — CSS Custom Properties
 * Product UI tokens · v3.5 (neutral-first) · July 2026
 *
 * Source: relay-creative/briefs/BRIEF.interface-v35.md · direction 7HZQAX
 * Supersedes: relay-tokens.css v3.4.1 (kept for archived v3.4 prototypes).
 *
 * NEUTRAL-FIRST: the interface fully works in black & white (structure),
 * then brand type joins, then teal touch points. The v3.4 teal-tinted light
 * surfaces (#f5faf9 / #edf7f5 …) and teal-grey text (#8caaaa) are RETIRED.
 * All values AA-verified (WCAG 2.x). Brand teal #0d9488 is a LAYER, not a
 * foundation — touch points only (icons, rings, the mark, buttons, Codes).
 *
 * Dual teal identity: #0d9488 light / #2dd4bf dark.
 * #00D9C8 is motion-only (--rly-pulse) — never render it statically.
 */

/* =============================================================
   PRODUCT UI — LIGHT MODE (primary)
   ============================================================= */
:root {
  /* Backgrounds — neutral, no tint */
  --rly-bg:          #ffffff;   /* Page canvas */
  --rly-surface:     #f7f7f7;   /* Cards, sidebars */
  --rly-panel:       #efefef;   /* Inputs, nested panels */
  --rly-deep:        #e4e4e4;   /* Hover, pressed states */

  /* Borders */
  --rly-border:      #e2e2e2;   /* Default (decorative) */
  --rly-border-hi:   #cfcfcf;   /* Focused / active (decorative) */
  --rly-border-input:#6e6e6e;   /* Form inputs — 5.1:1 vs bg (AA non-text) */

  /* Text */
  --rly-text:        #111111;   /* Body — 18.9:1 */
  --rly-text-2:      #444444;   /* Labels, metadata — 9.7:1 */
  --rly-text-muted:  #616161;   /* Captions, placeholders — 6.2:1 (AA) */
  --rly-text-faint:  #9a9a9a;   /* Disabled / decorative ONLY (WCAG-exempt) */
  --rly-text-bright: #111111;   /* Headings, emphasis */

  /* Accent — brand teal, staged in as touch points only.
     Split by role so contrast is correct per use. */
  --rly-accent-ui:   #0d9488;   /* Icons, focus rings, the mark, button fills — 3.7:1 non-text */
  --rly-accent-text: #0f766e;   /* Links, Codes as text — 5.5:1 (AA) */
  --rly-accent-fill: #0d9488;   /* Button background (ratified 7HZQAX — swap to #0f766e for strict AA) */
  --rly-on-accent:   #ffffff;   /* Text on --rly-accent-fill */
  --rly-accent-tint: #ccfbf1;   /* Teal tint background */

  /* Back-compat alias — legacy --rly-teal maps to the UI accent */
  --rly-teal:        #0d9488;
  --rly-teal-dim:    #ccfbf1;

  /* Pulse — MOTION ONLY. Never static. See relay-pulse.css. */
  --rly-pulse:       #00D9C8;

  /* Secondary — Indigo (org/team/pro tier only) */
  --rly-indigo:      #6366f1;
  --rly-indigo-dim:  #ede9fe;

  /* Semantic — text-AA on white */
  --rly-success:     #15803d;   /* ≥4.8:1 */
  --rly-warning:     #b45309;
  --rly-error:       #dc2626;

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

  /* Shape */
  --rly-radius:      6px;
  --rly-radius-card: 8px;
  --rly-radius-sm:   4px;
  --rly-radius-full: 9999px;

  /* Layout */
  --rly-sidebar-w:   224px;
  --rly-rail-w:      56px;       /* v3.5 desktop icon rail */
}

/* =============================================================
   PRODUCT UI — DARK MODE (contrast mode; canonical orientation)
   bg darkest, cards lighter. Ink-flip on teal fills.
   ============================================================= */
[data-theme="dark"] {
  --rly-bg:          #0d0d0d;
  --rly-surface:     #181818;
  --rly-panel:       #222222;
  --rly-deep:        #2a2a2a;

  --rly-border:      #2a2a2a;
  --rly-border-hi:   #3a3a3a;
  --rly-border-input:#707070;

  --rly-text:        #e0e0e0;
  --rly-text-2:      #a3a3a3;
  --rly-text-muted:  #8f8f8f;
  --rly-text-faint:  #606060;
  --rly-text-bright: #f0f0f0;

  --rly-accent-ui:   #2dd4bf;   /* 10.4:1 */
  --rly-accent-text: #2dd4bf;
  --rly-accent-fill: #2dd4bf;
  --rly-on-accent:   #0d1514;   /* INK FLIP — 9.9:1. White-on-teal is 1.9:1: never use. */
  --rly-accent-tint: rgba(45,212,191,0.12);

  --rly-teal:        #2dd4bf;
  --rly-teal-dim:    rgba(45,212,191,0.12);

  --rly-pulse:       #00D9C8;

  --rly-indigo:      #818cf8;
  --rly-indigo-dim:  rgba(129,140,248,0.12);

  --rly-success:     #4ade80;
  --rly-warning:     #fbbf24;
  --rly-error:       #f87171;
}

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

/* =============================================================
   REQUIRED BASELINE (v3.5)
   Focus-visible ring + reduced-motion guard everywhere.
   ============================================================= */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rly-accent-ui);
  border-radius: var(--rly-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;
  }
}

/* =============================================================
   CODE — canonical display pattern (JetBrains Mono 600 · 0.15em · uppercase)
   On white, a Code shown as text uses --rly-accent-text (5.5:1 AA).
   ============================================================= */
.relay-code {
  font-family: var(--rly-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rly-accent-text);
}

.relay-code-hero {
  font-family: var(--rly-font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rly-text-bright);
  display: block;
  padding: 16px 22px;
  background: var(--rly-panel);
  border-radius: var(--rly-radius-card);
  border: 0.5px solid var(--rly-border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.relay-code-hero:hover { border-color: var(--rly-accent-ui); }

/* =============================================================
   WORDMARK — Outfit 600 (Syne retired v3.4)
   ============================================================= */
.relay-wordmark {
  font-family: var(--rly-font-mark);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rly-text-bright);
}

/* ™ — primary/first-use only; Relay Context Inc.™ for the legal entity */
/* Trademark — Outfit upright (sans, never the italic display face); superscript; primary/first-use only. */
.rl-tm { font-family: var(--rly-font-mark); font-style: normal; font-weight: 500; font-size: 0.42em; vertical-align: super; letter-spacing: 0; margin-left: 0.1em; }