/* ============================================================
   DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow.
   Light mode by default; dark mode via prefers-color-scheme.
   ============================================================ */

:root {
  /* Brand */
  --blue:        #1a73e8;
  --blue-dark:   #0b57d0;
  --blue-soft:   #e8f0fe;
  --blue-tint:   #f0f6ff;
  --blue-bright: #4a9eff;

  /* Semantic */
  --amber:       #fbbc04;
  --red:         #d93025;
  --red-soft:    #fce8e6;
  --green:       #1e8e3e;
  --green-soft:  #e6f4ea;

  /* Neutral — light mode */
  --ink:         #111418;  /* primary text */
  --slate:       #3c4043;  /* secondary text */
  --muted:       #6b7075;  /* tertiary text */
  --border:      #e3e6ea;
  --border-soft: #eef2f8;
  --bg:          #ffffff;
  --bg-soft:     #f7f9fc;
  --bg-card:     #ffffff;
  --bg-tinted:   #f1f6ff;
  --border-tinted: #d4e3fb;
  --bg-overlay:  rgba(0, 0, 0, 0.5);

  /* Pure */
  --white:       #ffffff;
  --black:       #000000;

  /* Type */
  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:     12px;
  --text-sm:     13px;
  --text-base:   14px;
  --text-md:     15px;
  --text-lg:     17px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    38px;
  --text-4xl:    44px;

  --leading-tight: 1.15;
  --leading-snug:  1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -1px;
  --tracking-snug:  -0.5px;
  --tracking-wide:  0.08em;

  /* Radius */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* 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;
  --space-16:    64px;
  --space-20:    80px;
  --space-24:    96px;

  /* Shadow */
  --shadow-sm:   0 4px 20px rgba(26, 115, 232, 0.08);
  --shadow-blue: 0 6px 18px rgba(26, 115, 232, 0.4);
  --shadow-blue-hover: 0 10px 24px rgba(26, 115, 232, 0.5);
  --shadow-blue-lg: 0 8px 24px rgba(26, 115, 232, 0.35);
  --shadow-blue-lg-hover: 0 12px 30px rgba(26, 115, 232, 0.45);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --t-fast:      0.15s;
  --t-base:      0.2s;
  --t-slow:      0.3s;
  --t-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --container:   1200px;
  --container-narrow: 880px;
  --container-prose: 720px;
}

/* ============================================================
   DARK MODE — system preference triggered.
   Override semantic and neutral tokens; brand stays consistent
   but slightly brightened for legibility on dark surfaces.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --blue:        #4a9eff;
    --blue-dark:   #1a73e8;
    --blue-soft:   #1a2e4d;
    --blue-tint:   #15233e;
    --blue-bright: #7eb6ff;

    --red-soft:    #3a1a18;
    --green-soft:  #133922;

    --ink:         #f0f3f8;
    --slate:       #c2c8d2;
    --muted:       #8a9099;
    --border:      #2a2f38;
    --border-soft: #1f242c;
    --bg:          #0f1318;
    --bg-soft:     #161b22;
    --bg-card:     #1a1f27;
    --bg-tinted:   #15233e;
    --border-tinted: #2a4373;
    --bg-overlay:  rgba(0, 0, 0, 0.7);

    --shadow-sm:   0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.6);
  }
}