/* =========================================================
   Design tokens. The only file that declares raw values.
   All other CSS references tokens via var(--...).
   ========================================================= */

:root {
  /* --- Color: light theme ------------------------------------------- */
  --color-background: oklch(0.985 0 0);
  --color-foreground: oklch(0.35 0.015 185);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.35 0.015 185);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.35 0.015 185);
  --color-primary: oklch(0.35 0.015 185);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-secondary: oklch(0.67 0.14 220);
  --color-secondary-foreground: oklch(0.99 0 0);
  --color-muted: oklch(0.87 0.005 70);
  --color-muted-foreground: oklch(0.55 0.01 185);
  --color-surface-soft: oklch(0.94 0.003 70);
  --color-accent: hsl(0, 0%, 97%);
  --color-accent-foreground: hsl(240, 3%, 15%);
  --color-border: oklch(0.94 0 0);
  --color-input: oklch(0.94 0 0);
  --color-ring: oklch(0.708 0 0);

  /* Semantic status colors (shared across themes) */
  --color-success: #00a656;
  --color-destructive: oklch(0.577 0.245 27.325);

  /* --- Typography --------------------------------------------------- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --font-weight-text: 400;
  --font-weight-medium: 500;
  --font-weight-display: 600;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.5rem;
  --fs-5xl: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-none: 1;

  --tracking-tight: -0.025em;
  --tracking-body: -0.011em;

  /* --- Radius ------------------------------------------------------- */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* --- Layout ------------------------------------------------------- */
  --container-max: 1400px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  /* Horizontal distance from the viewport edge to the content strip */
  --gutter: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  /* Matches .site-header min-height; used to offset the full-screen
     mobile menu below the sticky header. */
  --site-header-height: 60px;

  /* --- Shadow ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(16 17 20 / 6%);
  --shadow-md: 0 6px 20px rgb(16 17 20 / 8%);
  --shadow-lg: 0 24px 48px -12px rgb(16 17 20 / 20%);

  /* --- Motion ------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 400ms;

  /* --- Dark surfaces (header, footer, inverted bands) --------------- */
  --surface-dark-900: oklch(0.35 0.015 185);
  --surface-dark-950: oklch(0.28 0.012 185);
  --surface-dark-999: oklch(0.22 0.01 185);
  --surface-dark-gradient: linear-gradient(
    180deg,
    var(--surface-dark-900) 0%,
    var(--surface-dark-950) 100%
  );

  /* Token overrides applied when children live on a dark surface */
  --on-dark-foreground: oklch(0.99 0 0);
  --on-dark-muted-foreground: oklch(0.65 0 0);
  --on-dark-border: oklch(0.40 0.01 185);
  --on-dark-accent: oklch(0.30 0.01 185);
  --on-dark-accent-foreground: oklch(0.85 0 0);

  /* Light-context shadows used to restore the light palette inside a
     dark scope (e.g. mega menu opening below the dark header). */
  --on-light-foreground: oklch(0.35 0.015 185);
  --on-light-muted-foreground: oklch(0.55 0.01 185);
  --on-light-border: oklch(0.94 0 0);
  --on-light-accent: hsl(30, 7%, 95%);
  --on-light-accent-foreground: oklch(0.35 0.015 185);
  --on-light-primary: oklch(0.35 0.015 185);
  --on-light-primary-foreground: oklch(0.99 0 0);

  /* --- Decorative (macOS-style window chrome used in hero asset) ---- */
  --deco-window-red: #ff5f56;
  --deco-window-yellow: #ffbd2e;
  --deco-window-green: #27c93f;

  /* --- Brand accents ------------------------------------------------- */
  --brand-teal: #00aed8;
  --brand-blue: #008db0;
  --brand-gradient: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-blue) 100%);
}

/* Light theme only. Dark theme intentionally not shipped. */