/*
 * Relay Design System — CSS Custom Properties
 * Product UI tokens · v3.4 · June 2026
 *
 * Source: relay-creative/brand/BRAND-BRIEF.md v3.2 (ZXDSH6)
 *
 * ONE visual system — app, mobile, marketing, decks, collateral.
 * Display: Cormorant Garamond 300–400 italic. Body/UI: Outfit 300–600. Codes: JetBrains Mono.
 * IBM Plex Sans, DM Mono, Syne — superseded. Do not use.
 */

/* =============================================================
   PRODUCT UI — LIGHT MODE (primary)
   Pure white canvas · teal-tinted surfaces · flat
   ============================================================= */
:root, [data-theme="light"] {
  /* Backgrounds */
  --rly-bg:          #ffffff;   /* Page canvas */
  --rly-surface:     #f7f7f7;   /* Cards, sidebars */
  --rly-panel:       #f0f0f0;   /* Inputs, nested panels */
  --rly-deep:        #e8e8e8;   /* Hover, pressed states */

  /* Borders */
  --rly-border:      #e4e4e4;   /* Default */
  --rly-border-hi:   #cccccc;   /* Focused / active */

  /* Text */
  --rly-text:        #111111;   /* Body */
  --rly-text-2:      #555555;   /* Labels, metadata */
  --rly-text-muted:  #999999;   /* Placeholders */
  --rly-text-bright: #000000;   /* Headings, emphasis */

  /* Accent — teal (PRIMARY: touch points only) */
  --rly-teal:        #0d9488;
  --rly-teal-dim:    rgba(13,148,136,0.12);

  /* Secondary — indigo (org/team/pro tier only) */
  --rly-indigo:      #6366f1;
  --rly-indigo-dim:  rgba(99,102,241,0.12);

  /* Semantic */
  --rly-success:     #16a34a;   /* Received */
  --rly-warning:     #d97706;   /* Pending / expiring */
  --rly-error:       #dc2626;   /* Expired / failed */

  /* Typography */
  --rly-font:        'Outfit', system-ui, sans-serif;
  --rly-font-mono:   'JetBrains Mono', monospace;

  /* Shape */
  --rly-radius:      6px;       /* Buttons, inputs */
  --rly-radius-card: 8px;       /* Cards */
  --rly-radius-sm:   4px;       /* Badges */
  --rly-radius-full: 9999px;    /* Pills */

  /* Layout */
  --rly-sidebar-w:   224px;

  color-scheme: light;
}

/* =============================================================
   PRODUCT UI — DARK MODE (terminal contrast, opt-in only)
   [data-theme="dark"] — pure neutral, no teal tinting on surfaces
   ============================================================= */
[data-theme="dark"] {
  --rly-bg:          #0d0d0d;   /* Terminal black */
  --rly-surface:     #181818;   /* Cards */
  --rly-panel:       #222222;   /* Nested panels */
  --rly-deep:        #2a2a2a;

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

  --rly-text:        #e0e0e0;
  --rly-text-2:      #a0a0a0;
  --rly-text-muted:  #606060;
  --rly-text-bright: #f0f0f0;

  --rly-teal:        #2dd4bf;   /* Brighter on dark */
  --rly-teal-dim:    rgba(45,212,191,0.12);

  --rly-indigo:      #818cf8;   /* Lighter on dark */
  --rly-indigo-dim:  rgba(129,140,248,0.12);

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

  color-scheme: dark;
}

/* =============================================================
   RELAY CODE — canonical display pattern
   JetBrains Mono 600 · 0.15em tracking · teal · uppercase
   Always called "Relay Code" — never PIN, relay ID, relay key
   ============================================================= */
.relay-code {
  font-family: var(--rly-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rly-teal);
}

.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-teal);
  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-teal);
}

/* =============================================================
   COMPONENT NOTES (v3.2)
   - Cards: rly-surface bg, 0.5px border, 8px radius, 16px padding
   - Buttons: Outfit 600, teal bg, white text, 6px radius, max 0.15s transition
   - Inputs: rly-panel bg, focus = teal border + 3px rgba box-shadow
   - NO drop shadows in product UI
   - NO gradients (exception: teal→indigo bar in brand hero moments)
   - Status dots: 7px, border-radius 50%, aria-hidden=true
   - Teal/indigo on touch points only (buttons, codes, active states, badges)
   ============================================================= */