/*
  Design tokens — single source of truth for color, type, spacing, radius,
  shadow, and motion across the whole app. Every other stylesheet must
  reference these via var(--token-name); never hardcode a hex/px value
  directly in a component stylesheet. Changing the look of the entire app
  (rebrand, theme tweak) should mean editing only this file.

  Breakpoints (used literally in media queries, since custom properties
  cannot be interpolated into @media conditions):
    480px  - phone landscape / large phone
    768px  - tablet
    1024px - small desktop / laptop
    1280px - large desktop
*/

:root {
  /* ---------- Color: brand ----------
     Deep ink-navy + warm amber, not a generic SaaS blue/teal pairing —
     reads closer to a premium editorial/academic brand (journals, serious
     long-form learning products) than a dashboard-tool aesthetic. */
  --color-primary-50:  #eef1f7;
  --color-primary-100: #d7deed;
  --color-primary-200: #b0bddb;
  --color-primary-300: #8295c2;
  --color-primary-400: #5b70a3;
  --color-primary-500: #3e5384;
  --color-primary-600: #2c3e68;
  --color-primary-700: #1f2d4d;
  --color-primary-800: #172239;
  --color-primary-900: #10182a;

  /* Darker than a first pass at "warm amber" — white text/icons on -500
     were measured under the 3:1 non-text minimum, and -600 under 4.5:1
     for text (button labels, eyebrow labels, topic numbers). */
  --color-accent-400: #dba556;
  --color-accent-500: #bf7f26;
  --color-accent-600: #9c651a;
  --color-accent-700: #7d5015;

  /* ---------- Color: semantic ---------- */
  --color-success: #1a9e6b;
  --color-success-bg: #e5f7ee;
  --color-warning: #b7791f;
  --color-warning-bg: #fdf3e0;
  /* Darker than a "typical" error red so text on --color-error-bg (and on
     white) clears the 4.5:1 WCAG AA minimum — #d64545 measured ~3.8-4.4:1. */
  --color-error: #b32e2e;
  --color-error-bg: #fceaea;

  /* ---------- Color: neutrals ---------- */
  --color-white: #ffffff;
  --color-gray-50:  #f8f9fb;
  --color-gray-100: #eef0f4;
  --color-gray-200: #e0e3e9;
  --color-gray-300: #c7ccd6;
  --color-gray-400: #9aa1b0;
  --color-gray-500: #6f7789;
  --color-gray-600: #525a6c;
  --color-gray-700: #3b4152;
  --color-gray-800: #262b38;
  --color-gray-900: #171a22;

  /* ---------- Color: semantic surface roles (light mode default) ---------- */
  --color-bg: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-surface-raised: var(--color-white);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  /* Not aliased to a gray-N step: chosen to clear 4.5:1 (WCAG AA) against
     both --color-bg and --color-surface, which gray-400/500 fall short of. */
  --color-text-muted: #5f6779;
  --color-text-inverse: var(--color-white);

  --color-link: var(--color-primary-600);
  --color-link-hover: var(--color-primary-700);

  --color-focus-ring: var(--color-primary-400);

  /* ---------- Typography ----------
     Fraunces (serif, self-hosted) for headings — carries the "expertise /
     scholarship" signal a generic geometric sans doesn't. Manrope for body
     and UI keeps everything else feeling current, not textbook-dated. */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.5rem;    /* 40px */
  --font-size-4xl:  3.25rem;   /* 52px */
  --font-size-5xl:  4.25rem;   /* 68px */

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

  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* Serif display faces read tighter than grotesque sans at the same
     negative tracking value — -0.02em (tuned for the old sans headings)
     was too aggressive for Fraunces at large sizes. */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;

  /* ---------- Spacing (4px base scale) ---------- */
  --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 */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---------- Radius ---------- */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 999px;

  /* ---------- Shadow (soft, layered, low-opacity) ---------- */
  --shadow-sm: 0 1px 2px rgba(23, 26, 34, 0.06);
  --shadow-md: 0 4px 12px rgba(23, 26, 34, 0.08);
  --shadow-lg: 0 12px 32px rgba(23, 26, 34, 0.12);
  --shadow-xl: 0 24px 56px rgba(23, 26, 34, 0.16);

  /* ---------- Motion ---------- */
  --transition-fast: 150ms;
  --transition-base: 220ms;
  --transition-slow: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --container-max-width: 1200px;

  /* ---------- Z-index scale ---------- */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-surface-raised: var(--color-gray-800);
    --color-border: var(--color-gray-700);
    --color-border-strong: var(--color-gray-600);

    --color-text-primary: var(--color-gray-50);
    --color-text-secondary: var(--color-gray-300);
    --color-text-muted: #8b93a2; /* 4.5:1+ against dark bg and surface */
    /* --color-text-inverse deliberately NOT overridden here: every usage
       (buttons, gradient banners, skip-link) sits on a fixed-hex colored
       background that doesn't change with theme either, so the text
       shouldn't flip to near-black in dark mode — it stays white from the
       :root default. That override was the dark-mode button/banner bug. */

    --color-link: var(--color-primary-300);
    --color-link-hover: var(--color-primary-200);

    --color-error: #f5a3a3;
    --color-error-bg: #3a2020;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.45);
  }
}

/* Manual override via a theme toggle (adds data-theme="dark"|"light" to <html>) */
:root[data-theme="dark"] {
  --color-bg: var(--color-gray-900);
  --color-surface: var(--color-gray-800);
  --color-surface-raised: var(--color-gray-800);
  --color-border: var(--color-gray-700);
  --color-border-strong: var(--color-gray-600);

  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-300);
  --color-text-muted: #8b93a2; /* 4.5:1+ against dark bg and surface */
  /* --color-text-inverse deliberately NOT overridden here — see the
     matching comment in the prefers-color-scheme block above. */

  --color-link: var(--color-primary-300);
  --color-link-hover: var(--color-primary-200);

  --color-error: #f5a3a3;
  --color-error-bg: #3a2020;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.45);
}