/**
 * Could I Extend — Design Tokens  (AIF-1954)
 *
 * Canonical CSS custom properties for the dark-theme app shell.
 * Used by: investor-demo.html (primary SPA), results page, report page,
 * dashboard, and any future app-shell templates.
 *
 * Import with:  <link rel="stylesheet" href="/css/tokens.css">
 * Reference as: var(--bg), var(--accent), etc.
 *
 * Typography:   'Inter' loaded locally (no third-party CDN).
 * Base font:    16px / system-ui fallback.
 *
 * Contrast ratios (WCAG AA):
 *   --text on --bg      ≥ 7.2 : 1  (AAA)
 *   --muted on --bg     ≥ 4.6 : 1  (AA)
 *   --accent on --bg    ≥ 4.8 : 1  (AA — use for large text / icons only)
 */

/* ── Colour tokens ── */
:root {
  /* Surfaces */
  --bg:              #0f1117;
  --surface:         #1a1d27;
  --surface-raised:  #22263a;
  --border:          #2a2d3a;
  --border-subtle:   #1f2232;

  /* Text */
  --text:            #e4e4e7;
  --muted:           #9ca3af;
  --placeholder:     #6b7280;

  /* Brand */
  --accent:          #6366f1;
  --accent-hover:    #818cf8;
  --accent-glow:     rgba(99, 102, 241, 0.3);
  --accent-faint:    rgba(99, 102, 241, 0.12);

  /* Semantic */
  --success:         #22c55e;
  --success-faint:   rgba(34, 197, 94, 0.15);
  --danger:          #ef4444;
  --danger-faint:    rgba(239, 68, 68, 0.15);
  --warning:         #f97316;
  --warning-faint:   rgba(249, 115, 22, 0.15);
  --info:            #38bdf8;
  --info-faint:      rgba(56, 189, 248, 0.15);
}

/* ── Spacing scale ── */
:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
}

/* ── Border radius ── */
:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
}

/* ── Typography ── */
:root {
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
}

/* ── Transition presets ── */
:root {
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}

/* ── Z-index scale ── */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
}