/* ============================================================
   PACELINE DESIGN TOKENS — V1.0
   Source: Brand Sheet Option 3C "Stealth Signal"
   Environment: Vanilla CSS, dark-first, light mode supported
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand Source Colors ─────────────────────────────── */
  --color-navy-deep:    #1A2332;
  --color-slate-dark:   #4A5568;
  --color-slate-mid:    #6B7280;
  --color-amber:        #C47700;
  --color-fog:          #E5E7EB;

  /* ── Extended Surface Colors (dark mode default) ─────── */
  --color-navy-surface: #222E42;
  --color-navy-border:  #2D3E56;
  --color-amber-muted:  #7A4B00;
  --color-amber-glow:   #E89500;

  /* ── Text Colors (dark mode default) ─────────────────── */
  --color-text-primary:   #E5E7EB;
  --color-text-secondary: #9CA3AF;
  --color-text-disabled:  #4A5568;

  /* ── Semantic / Status Colors ─────────────────────────── */
  --color-status-red:       #EF4444;
  --color-status-amber:     #F59E0B;
  --color-status-green:     #22C55E;
  --color-status-grey:      #6B7280;
  --color-status-red-bg:    #3B1515;
  --color-status-amber-bg:  #3B2800;
  --color-status-green-bg:  #0F2E1A;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

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

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.18em;

  /* ── Spacing ──────────────────────────────────────────── */
  --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;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Layout ───────────────────────────────────────────── */
  --layout-max-width:   1280px;
  --layout-sidebar:     220px;
  --layout-sidebar-collapsed: 56px;
  --layout-page-pad-sm: 24px;
  --layout-page-pad-lg: 40px;
  --table-row-height:   48px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
}

/* ── Light Mode Overrides ─────────────────────────────── */
:root[data-theme="light"] {
  --color-navy-deep:      #F9FAFB;
  --color-navy-surface:   #FFFFFF;
  --color-navy-border:    #E5E7EB;
  --color-slate-dark:     #D1D5DB;
  --color-slate-mid:      #9CA3AF;
  --color-text-primary:   #111827;
  --color-text-secondary: #4B5563;
  --color-text-disabled:  #D1D5DB;
  --color-fog:            #1A2332;
  /* Status colors unchanged — same semantics in both modes */
  /* Amber brand colors unchanged — same accent in both modes */
}