/*
  Design tokens. This is the ONLY file where a colour literal may appear.
  Dark mode is a token remap here — never add a [data-theme="dark"] rule
  anywhere else in the CSS system.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2');
}

:root {
  /* ---- Type ---------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
  --fs-4xl: clamp(3rem, 1.6rem + 5.6vw, 5.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.65;

  --tracking-tight: -.03em;
  --tracking-display: -.035em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Vertical rhythm: every <section> uses one of exactly these two. */
  --section-y: clamp(5rem, 9vw, 9rem);
  --section-y-tight: clamp(3rem, 5.5vw, 5rem);

  /* Horizontal gutter, shared by container and nav so edges line up. */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Containers ---------------------------------------------------- */
  --w-prose: 68ch;
  --w-content: 1140px;
  --w-wide: 1320px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-slower: 700ms;

  /* ---- Icon sizing --------------------------------------------------- */
  --icon-sm: 16px;
  --icon: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ---- Brand ramp (deepened royal — not the CSS keyword royalblue) ---- */
  --brand-50:  #eef1fc;
  --brand-100: #dde3fa;
  --brand-200: #bcc8f4;
  --brand-300: #93a5ea;
  --brand-400: #6a80e0;
  --brand-500: #3552cc;
  --brand-600: #2a41a8;
  --brand-700: #223485;
  --brand-800: #1c2c6c;
  --brand-900: #151f4d;
  --brand-950: #0d1330;

  /* ---- Accent: amber, on <=5% of surface ----------------------------- */
  --accent-300: #f5cf92;
  --accent-400: #f0b656;
  --accent-500: #e8a33d;
  --accent-600: #c9832a;

  /* ---- Tinted neutral ramp (hue-shifted toward brand) ----------------- */
  --gray-0:   hsl(228 40% 100%);
  --gray-50:  hsl(228 30% 98.5%);
  --gray-100: hsl(226 24% 96%);
  --gray-150: hsl(225 22% 93.5%);
  --gray-200: hsl(224 20% 90%);
  --gray-300: hsl(223 16% 82%);
  --gray-400: hsl(222 13% 64%);
  --gray-500: hsl(221 11% 47%);
  --gray-600: hsl(221 14% 35%);
  --gray-700: hsl(222 18% 23%);
  --gray-800: hsl(223 24% 15%);
  --gray-850: hsl(224 27% 12%);
  --gray-900: hsl(225 30% 8.5%);
  --gray-950: hsl(226 34% 5.5%);

  /* ---- Semantic tokens — components reference ONLY these -------------- */
  --surface-0: var(--gray-0);
  --surface-1: var(--gray-50);
  --surface-2: var(--gray-100);
  --surface-raised: var(--gray-0);
  --surface-glass: hsl(228 40% 100% / .72);
  --surface-inset: var(--gray-100);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--gray-0);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-glass: hsl(224 20% 90% / .8);

  --brand-fg: var(--brand-600);
  --brand-bg: var(--brand-500);
  --brand-bg-hover: var(--brand-600);
  --brand-tint: hsl(230 60% 96%);
  --accent-fg: var(--accent-600);
  --accent-bg: var(--accent-500);

  --success-bg: #e6f7ec;
  --success-fg: #15803d;
  --danger-bg: #fdecec;
  --danger-fg: #b42318;

  --focus-ring: var(--accent-500);

  /* ---- Elevation: layered, low-opacity, never a single flat blur ------ */
  --shadow-xs: 0 1px 2px hsl(225 30% 12% / .05);
  --shadow-sm: 0 1px 2px hsl(225 30% 12% / .05), 0 2px 6px -2px hsl(225 30% 12% / .06);
  --shadow-md: 0 1px 2px hsl(225 30% 12% / .04), 0 8px 24px -8px hsl(225 30% 12% / .12);
  --shadow-lg: 0 2px 4px hsl(225 30% 12% / .04), 0 16px 40px -12px hsl(225 30% 12% / .16);
  --shadow-xl: 0 4px 8px hsl(225 30% 12% / .04), 0 32px 64px -16px hsl(225 30% 12% / .2);
  --shadow-brand: 0 8px 28px -8px hsl(230 60% 40% / .35);

  /* ---- Signature gradients ------------------------------------------- */
  --aurora-1: hsl(230 70% 60% / .22);
  --aurora-2: hsl(258 70% 62% / .16);
  --aurora-3: hsl(38 85% 60% / .12);
  --grad-brand: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  --grad-text: linear-gradient(112deg, var(--brand-800) 0%, var(--brand-600) 45%, var(--brand-500) 78%, var(--accent-600) 125%);
  --hairline: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
}

/* ---- Dark mode: a token remap, nothing else ---------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: var(--gray-950);
    --surface-1: var(--gray-900);
    --surface-2: var(--gray-850);
    --surface-raised: var(--gray-850);
    --surface-glass: hsl(225 30% 8.5% / .72);
    --surface-inset: var(--gray-900);

    --text-primary: hsl(228 30% 96%);
    --text-secondary: hsl(224 15% 72%);
    --text-tertiary: hsl(222 13% 58%);
    --text-inverse: var(--gray-950);

    --border-subtle: hsl(224 22% 17%);
    --border-strong: hsl(223 18% 26%);
    --border-glass: hsl(224 22% 20% / .8);

    --brand-fg: var(--brand-300);
    --brand-bg: var(--brand-500);
    --brand-bg-hover: var(--brand-400);
    --brand-tint: hsl(230 40% 14%);
    --accent-fg: var(--accent-400);

    --success-bg: hsl(150 40% 12%);
    --success-fg: #4ade80;
    --danger-bg: hsl(0 40% 14%);
    --danger-fg: #f87171;

    --shadow-xs: 0 1px 2px hsl(0 0% 0% / .3);
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / .3), 0 2px 6px -2px hsl(0 0% 0% / .4);
    --shadow-md: 0 1px 2px hsl(0 0% 0% / .3), 0 8px 24px -8px hsl(0 0% 0% / .5);
    --shadow-lg: 0 2px 4px hsl(0 0% 0% / .3), 0 16px 40px -12px hsl(0 0% 0% / .55);
    --shadow-xl: 0 4px 8px hsl(0 0% 0% / .35), 0 32px 64px -16px hsl(0 0% 0% / .6);
    --shadow-brand: 0 8px 32px -8px hsl(230 70% 55% / .45);

    --aurora-1: hsl(230 80% 60% / .26);
    --aurora-2: hsl(262 75% 62% / .2);
    --aurora-3: hsl(38 85% 58% / .1);
    --grad-text: linear-gradient(112deg, hsl(228 40% 97%) 0%, var(--brand-300) 55%, var(--accent-400) 115%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: var(--gray-950);
  --surface-1: var(--gray-900);
  --surface-2: var(--gray-850);
  --surface-raised: var(--gray-850);
  --surface-glass: hsl(225 30% 8.5% / .72);
  --surface-inset: var(--gray-900);

  --text-primary: hsl(228 30% 96%);
  --text-secondary: hsl(224 15% 72%);
  --text-tertiary: hsl(222 13% 58%);
  --text-inverse: var(--gray-950);

  --border-subtle: hsl(224 22% 17%);
  --border-strong: hsl(223 18% 26%);
  --border-glass: hsl(224 22% 20% / .8);

  --brand-fg: var(--brand-300);
  --brand-bg: var(--brand-500);
  --brand-bg-hover: var(--brand-400);
  --brand-tint: hsl(230 40% 14%);
  --accent-fg: var(--accent-400);

  --success-bg: hsl(150 40% 12%);
  --success-fg: #4ade80;
  --danger-bg: hsl(0 40% 14%);
  --danger-fg: #f87171;

  --shadow-xs: 0 1px 2px hsl(0 0% 0% / .3);
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / .3), 0 2px 6px -2px hsl(0 0% 0% / .4);
  --shadow-md: 0 1px 2px hsl(0 0% 0% / .3), 0 8px 24px -8px hsl(0 0% 0% / .5);
  --shadow-lg: 0 2px 4px hsl(0 0% 0% / .3), 0 16px 40px -12px hsl(0 0% 0% / .55);
  --shadow-xl: 0 4px 8px hsl(0 0% 0% / .35), 0 32px 64px -16px hsl(0 0% 0% / .6);
  --shadow-brand: 0 8px 32px -8px hsl(230 70% 55% / .45);

  --aurora-1: hsl(230 80% 60% / .26);
  --aurora-2: hsl(262 75% 62% / .2);
  --aurora-3: hsl(38 85% 58% / .1);
  --grad-text: linear-gradient(112deg, hsl(228 40% 97%) 0%, var(--brand-300) 55%, var(--accent-400) 115%);
}