/*
 * tokens.css — design tokens: the single source of truth for the visual system.
 * Per D-26, every visual primitive (color, type, space, radii, shadow, motion,
 * breakpoints) is defined here as a CSS custom property; no other stylesheet
 * introduces arbitrary values. Restyling the site = editing this file (D-16, D-26).
 *
 * Theming (D-14): colors are expressed with the native light-dark() function,
 * driven by `color-scheme`. Modern-browser-only support (D-07) lets us avoid a
 * duplicated dark block or a build step (D-03). Auto mode follows the OS via
 * `color-scheme: light dark`; the manual toggle (theme.js) sets [data-theme] which
 * flips color-scheme. With JS disabled, [data-theme] is absent and the OS preference
 * is honored (graceful default, D-05/D-30).
 *
 * Color accents (D-18): neutral base + indigo primary + amber secondary (secondary
 * used sparingly per D-16). Every text/accent pair was verified WCAG AA in both
 * themes (D-12) before these values were committed.
 */

:root {
  color-scheme: light dark;

  /* ---- Color primitives ------------------------------------------------ */
  /* Neutrals — light ramp */
  --c-white: #ffffff;
  --c-gray-50: #f7f8fa;
  --c-gray-100: #f4f5f8;
  --c-gray-150: #eceef2;
  --c-gray-200: #d9dde4;
  --c-gray-400: #717a8d;
  --c-gray-500: #646b7d;
  --c-gray-600: #51596b;
  --c-gray-900: #14171f;

  /* Neutrals — dark ramp */
  --c-ink-950: #0b0e14;
  --c-ink-900: #141925;
  --c-ink-800: #1c2331;
  --c-ink-700: #2a3342;
  --c-ink-500: #646f84;
  --c-ink-450: #a4abbb;
  --c-ink-400: #8b93a5;
  --c-ink-100: #e7e9ee;

  /* Primary accent — indigo */
  --c-indigo-300: #a5b4fc;
  --c-indigo-400: #818cf8;
  --c-indigo-600: #4f46e5;
  --c-indigo-700: #4338ca;
  --c-indigo-surface-light: #edeafe;
  --c-indigo-surface-dark: #1d2340;
  --c-indigo-on-surface-dark: #c7cdff;

  /* Secondary accent — amber (used sparingly, D-16) */
  --c-amber-400: #fbbf24;
  --c-amber-500: #f59e0b;
  --c-amber-700: #b45309;
  --c-amber-ink: #231a08;

  /* ---- Semantic colors (light value, dark value) ----------------------- */
  --color-bg: light-dark(var(--c-white), var(--c-ink-950));
  --color-surface: light-dark(var(--c-gray-100), var(--c-ink-900));
  --color-surface-2: light-dark(var(--c-gray-150), var(--c-ink-800));
  --color-text: light-dark(var(--c-gray-900), var(--c-ink-100));
  --color-text-muted: light-dark(var(--c-gray-600), var(--c-ink-450));
  --color-text-subtle: light-dark(var(--c-gray-500), var(--c-ink-400));
  --color-border: light-dark(var(--c-gray-200), var(--c-ink-700));
  --color-border-strong: light-dark(var(--c-gray-400), var(--c-ink-500));

  --color-accent: light-dark(var(--c-indigo-600), var(--c-indigo-400));
  --color-accent-hover: light-dark(var(--c-indigo-700), var(--c-indigo-300));
  --color-on-accent: light-dark(var(--c-white), var(--c-ink-950));
  --color-accent-surface: light-dark(var(--c-indigo-surface-light), var(--c-indigo-surface-dark));
  --color-on-accent-surface: light-dark(var(--c-indigo-700), var(--c-indigo-on-surface-dark));

  --color-secondary: light-dark(var(--c-amber-500), var(--c-amber-400));
  --color-secondary-text: light-dark(var(--c-amber-700), var(--c-amber-400));
  --color-on-secondary: var(--c-amber-ink);

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

  /* Elevation — light-dark() on the shadow tint keeps shadows theme-aware */
  --shadow-1: light-dark(rgba(20, 24, 35, 0.06), rgba(0, 0, 0, 0.45));
  --shadow-2: light-dark(rgba(20, 24, 35, 0.1), rgba(0, 0, 0, 0.55));
  --shadow-sm: 0 1px 2px var(--shadow-1);
  --shadow-md: 0 4px 14px var(--shadow-2), 0 2px 4px var(--shadow-1);
  --shadow-lg: 0 16px 40px var(--shadow-2), 0 4px 10px var(--shadow-1);

  /* ---- Typography (D-17) ----------------------------------------------- */
  /* System font stack: zero font requests, instant render, no CDN dependency */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Modular type scale; display sizes are fluid via clamp() (D-13) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4rem);
  --text-6xl: clamp(3rem, 2rem + 5vw, 5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---- Spacing scale (--space-*, D-16 guardrail 3) --------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

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

  /* ---- Motion (D-15; disabled under prefers-reduced-motion in base.css) - */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 72rem;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --focus-width: 3px;

  /* ---- Z-index --------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 1000;

  /* ---- Breakpoints (reference only) ------------------------------------ */
  /* Custom properties cannot be read inside @media; these document the
     literal values used in layout.css / components.css media queries. */
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
}

/* Manual theme override (theme.js sets [data-theme]; flips color-scheme so
   light-dark() resolves accordingly — D-14). */
:root[data-theme="light"] {
  color-scheme: light;
}

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