/* ==========================================================================
   Design tokens — Bigyan Ghimire · "Ink & Brass"
   Deep blue ink, quiet neutrals, one thin line of brass (gold) for emphasis.
   Light is the default; dark is [data-theme="dark"] (set before first paint).
   ========================================================================== */
:root {
  color-scheme: light;

  /* Colour — surfaces */
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f5f7fb;
  --c-surface-3: #eceff6;
  --c-ink: #0a1730;            /* deepest navy: headings, inverted sections */
  --c-text: #1a2336;
  --c-text-muted: #556078;     /* >= 6:1 on white */
  --c-text-faint: #667187;
  --c-border: #e1e6ef;
  --c-border-strong: #c9d1e0;

  /* Colour — brand */
  --c-primary: #12347a;        /* deep blue */
  --c-primary-600: #1e50b4;    /* working blue: links, hover */
  --c-primary-soft: #e8eefb;
  --c-on-primary: #ffffff;
  --c-accent: #b08a3e;         /* brass: hairlines, markers (decorative) */
  --c-accent-text: #7a5c1c;    /* brass that passes AA on white */
  --c-accent-soft: #f6efdf;

  /* Colour — status */
  --c-success: #17794d;
  --c-success-soft: #e4f4ec;
  --c-danger: #b42335;
  --c-danger-soft: #fbe9ec;
  --c-info: #1e50b4;
  --c-info-soft: #e8eefb;

  --c-focus: #1e50b4;
  --c-overlay: rgba(8, 16, 34, .55);
  --c-header-bg: rgba(255, 255, 255, .88);

  /* Typography */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-xl: clamp(1.15rem, 1.08rem + .4vw, 1.4rem);
  --fs-2xl: clamp(1.4rem, 1.25rem + .8vw, 1.9rem);
  --fs-3xl: clamp(1.55rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-4xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.6;
  --lh-prose: 1.75;

  /* Spacing (4px base) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);

  /* Radius — small, deliberate */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows — cool, low-opacity, layered */
  --shadow-sm: 0 1px 2px rgba(10, 23, 48, .06), 0 1px 1px rgba(10, 23, 48, .04);
  --shadow-md: 0 2px 4px rgba(10, 23, 48, .04), 0 8px 24px -8px rgba(10, 23, 48, .14);
  --shadow-lg: 0 4px 8px rgba(10, 23, 48, .04), 0 24px 48px -16px rgba(10, 23, 48, .22);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-focus) 35%, transparent);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --header-h: 68px;
  --announce-h: 0px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-dropdown: 120;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-skip: 500;
}

[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0a101d;
  --c-surface: #0f1829;
  --c-surface-2: #131e33;
  --c-surface-3: #1a2740;
  --c-ink: #050b16;
  --c-text: #dfe5f1;
  --c-text-muted: #9ca8c0;
  --c-text-faint: #8593ab;
  --c-border: #1f2c45;
  --c-border-strong: #2d3d5c;

  --c-primary: #7ea6ff;
  --c-primary-600: #a3c0ff;
  --c-primary-soft: #14233f;
  --c-on-primary: #07142d;
  --c-accent: #d0aa5c;
  --c-accent-text: #d8b66e;
  --c-accent-soft: #231e12;

  --c-success: #4cc38a;
  --c-success-soft: #0f2a1f;
  --c-danger: #ff7a8a;
  --c-danger-soft: #2e1218;
  --c-info: #7ea6ff;
  --c-info-soft: #14233f;

  --c-focus: #9dbcff;
  --c-overlay: rgba(2, 6, 14, .7);
  --c-header-bg: rgba(10, 16, 29, .86);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 28px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 28px 56px -18px rgba(0, 0, 0, .75);
}

/* Legacy variable aliases used by un-migrated pages (courses, ai) */
:root, [data-theme="dark"] {
  --primary: var(--c-primary-600);
  --surface: var(--c-surface);
  --border: var(--c-border);
  --text: var(--c-text);
  --muted: var(--c-text-muted);
  --bg: var(--c-bg);
}

/* Legacy aliases — keep un-migrated pages (courses, ai, blog until Worker B restyles them)
   rendering on style.css. New code must use the --c-* tokens above. */
:root, [data-theme="dark"] {
  --primary-light: var(--c-primary-soft);
  --primary-dark: var(--c-primary);
  --text-sub: var(--c-text-muted);
  --text-muted: var(--c-text-faint);
  --text-on-brand: var(--c-on-primary);
  --white: var(--c-surface);
  --surface-alt: var(--c-surface-2);
  --border-dark: var(--c-border-strong);
  --accent: var(--c-accent);
  --accent-light: var(--c-accent-soft);
  --gold: var(--c-accent);
  --green: var(--c-success);
  --green-light: var(--c-success-soft);
  --teal: var(--c-primary-600);
  --tr: all .25s var(--ease);
  --radius: 12px;
  --glass-bg: var(--c-header-bg);
  --glass-border: var(--c-border);
  --glass-shadow: var(--shadow-md);
  --footer-bg: var(--c-ink);
  --footer-text: #aebad2;
}