/* ============================================================
   EDL OS · Design Tokens v3.0
   Generated: 2026-05-25
   Spec: Design Brief v1.0, §2
   ============================================================ */

:root {
  /* ── Brand (primary) ─────────────────────────────────────── */
  --tangerine:        #FF6B1A;
  --tangerine-soft:   #FFF8F2;
  --tangerine-border: #FFD9BD;
  --tangerine-dark:   #D9520C;
  --tangerine-glow:   rgba(255, 107, 26, 0.10);

  /* ── Neutrals ────────────────────────────────────────────── */
  --ink:              #0A0A0A;
  --ink-soft:         #27272A;
  --muted:            #52525B;
  --subtle:           #71717A;
  --line:             #E4E4E7;
  --bg-light:         #FAFAFA;
  --bg-mid:           #F5F5F5;
  --white:            #FFFFFF;

  /* ── Agent system ────────────────────────────────────────── */
  --agent-analysis:        #2563EB;
  --agent-analysis-bg:     #F0F9FF;
  --agent-analysis-border: #BAE6FD;

  --agent-letter:          #FF6B1A;
  --agent-letter-bg:       #FFF8F2;
  --agent-letter-border:   #FFD9BD;

  --agent-monitor:         #7C3AED;
  --agent-monitor-bg:      #F5F3FF;
  --agent-monitor-border:  #DDD6FE;

  /* ── Status (consent traffic light) ──────────────────────── */
  --status-green:     #16A34A;
  --status-green-bg:  #F0FDF4;
  --status-yellow:    #D97706;
  --status-yellow-bg: #FFFBEB;
  --status-red:       #DC2626;
  --status-red-bg:    #FEF2F2;

  /* ── Dark mode tokens (prep, not active) ─────────────────── */
  --dark-bg:          #0A0A0F;
  --dark-surface:     #171717;
  --dark-text:        #F5F5F5;
  --dark-border:      #27272A;

  /* ── Typography ──────────────────────────────────────────── */
  --font-primary:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display:    clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:         clamp(2rem, 4vw, 3.5rem);
  --fs-h2:         clamp(1.5rem, 2.8vw, 2.25rem);
  --fs-h3:         clamp(1.125rem, 1.8vw, 1.5rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-eyebrow:    0.75rem;
  --fs-mono-num:   0.875rem;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  --lh-display:    1.1;
  --lh-heading:    1.2;
  --lh-body:       1.55;
  --lh-tight:      1.3;

  --ls-display:    -0.03em;
  --ls-h1:         -0.02em;
  --ls-eyebrow:    0.1em;

  /* ── Spacing (4px grid) ──────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-tight:   6px;
  --radius-default: 10px;
  --radius-soft:    14px;
  --radius-bubble:  16px 16px 16px 4px;
  --radius-pill:    999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-subtle:  0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card:    0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lift:    0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow:    0 12px 28px rgba(255, 107, 26, 0.10);
  --shadow-modal:   0 24px 48px rgba(0, 0, 0, 0.15);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-hover:      200ms;
  --dur-card:       250ms;
  --dur-scene:      350ms;
  --dur-fade-in:    600ms;
  --dur-gradient:   8s;

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-base:     1;
  --z-card:     10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:      1200px;
  --max-width-wide: 1320px;
  --max-width-text: 780px;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover:    0ms;
    --dur-card:     0ms;
    --dur-scene:    0ms;
    --dur-fade-in:  0ms;
    --dur-gradient: 0s;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}