/* ==========================================================================
   Design Tokens
   AMC 10 Mastery — single source of truth for color, type, space, and shape.
   All components must consume these variables rather than hard-coded values.
   ========================================================================== */

:root {
  /* ---- Typography -------------------------------------------------- */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
    Menlo, Consolas, monospace;

  --text-display: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-page-title: clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);
  --text-section: 1.5rem;
  --text-subsection: 1.2rem;
  --text-body-lg: 1.0625rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-prose: 1.7;

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

  /* ---- Spacing scale ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Shape ---------------------------------------------------------*/
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Layout --------------------------------------------------------*/
  --content-width: 740px;
  --content-width-wide: 920px;
  --sidebar-width: 272px;
  --toc-width: 220px;
  --header-height: 60px;

  /* ---- Motion ----------------------------------------------------------*/
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Elevation ---------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 24, 31, 0.12);

  /* ---- Z-index scale -------------------------------------------------*/
  --z-sticky: 10;
  --z-drawer: 40;
  --z-overlay: 50;
  --z-toast: 60;

  color-scheme: light;

  /* ---- Color: Light theme (default) ---------------------------------
     Cool, near-white "paper" background rather than warm cream; ink-navy
     text; a restrained indigo accent. Avoids both the common warm-cream
     and near-black AI-default palettes. */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #1b2430;
  --color-text-muted: #5b6472;
  --color-text-faint: #8891a0;
  --color-border: #e1e5eb;
  --color-border-strong: #cbd1db;

  --color-accent: #33508c;
  --color-accent-hover: #263c6b;
  --color-accent-soft: #e9edf7;
  --color-accent-contrast: #ffffff;

  --color-success: #256b4a;
  --color-success-soft: #e5f2ea;
  --color-warning: #92600f;
  --color-warning-soft: #faf1de;
  --color-danger: #9c3b3b;
  --color-danger-soft: #f8e9e9;
  --color-info: #2c6a86;
  --color-info-soft: #e6f1f5;

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* Signature grid texture (used sparingly on hero/header) */
  --grid-line: rgba(51, 80, 140, 0.08);
}

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

  --color-bg: #14181f;
  --color-surface: #1b212b;
  --color-surface-raised: #212837;
  --color-text: #e8eaef;
  --color-text-muted: #9aa2b1;
  --color-text-faint: #6c7484;
  --color-border: #2b3241;
  --color-border-strong: #3a4356;

  --color-accent: #90aae4;
  --color-accent-hover: #aec0ec;
  --color-accent-soft: #232c42;
  --color-accent-contrast: #101521;

  --color-success: #6fbd97;
  --color-success-soft: #1c2c26;
  --color-warning: #dab066;
  --color-warning-soft: #2c2519;
  --color-danger: #dd8f8f;
  --color-danger-soft: #2c1e1e;
  --color-info: #7fbcd6;
  --color-info-soft: #19262c;

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  --grid-line: rgba(144, 170, 228, 0.08);
}