/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Dark Navy / Editorial
   Rectivis AI — Foundation Tokens
   ═══════════════════════════════════════════════════════════════
   
   HOW TO EXTEND:
   All colors, radii, shadows, and fonts are defined here.
   New pages/components should ONLY use these variables.
   To add a new token: add it here, then use var(--token-name).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-display: 'Raleway', -apple-system, sans-serif;
  --font-body: 'Raleway', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Dark Navy Palette ── */
  --bg-primary:     #202020;
  --bg-surface:     #292929;
  --bg-surface-alt: #353a36;
  --bg-inset:       rgb(57, 56, 59);
  --bg-elevated:    #3f4672;

  --border:         #3f3f3f;
  --border-light:   #3f3f3f;
  --border-focus:   #f9b17a;

  --text-primary:   #ffffff;
  --text-secondary: #c4d0b0;
  --text-tertiary:  #b4b7c3;
  --text-inverse:   #2d3250;

  /* ── Accent — Warm Orange ── */
  --accent:         #f9b17a;
  --accent-hover:   #e89d65;
  --accent-light:   rgba(249, 177, 122, 0.10);
  --accent-badge:   rgba(249, 177, 122, 0.15);
  --accent-muted:   #4a3a2e;

  /* ── Safety Colors (dark-adapted) ── */
  --safety-red:           #f87171;
  --safety-red-bg:        rgba(248, 113, 113, 0.08);
  --safety-red-border:    rgba(248, 113, 113, 0.20);

  --safety-amber:         #f9b17a;
  --safety-amber-bg:      rgba(249, 177, 122, 0.08);
  --safety-amber-border:  rgba(249, 177, 122, 0.18);

  --safety-green:         #34d399;
  --safety-green-bg:      rgba(52, 211, 153, 0.08);
  --safety-green-border:  rgba(52, 211, 153, 0.18);

  /* ── Confidence Indicators ── */
  --confidence-high: #34d399;
  --confidence-mid:  #f9b17a;
  --confidence-low:  #f87171;

  /* ── Shadows (deep for dark theme) ── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(249, 177, 122, 0.25);
  --shadow-glow:  0 0 20px rgba(249, 177, 122, 0.08);

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-med:  0.25s ease;
}