/* Design tokens. Direction: Apple-grade restraint. System font stack (SF Pro on Apple devices),
   self-hosted Inter as the consistent fallback elsewhere. Near-white and near-black neutrals, one blue accent. */
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.8125rem;   /* 13 */
  --step-0: 1.0625rem;    /* 17, Apple body */
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.5rem + 3vw, 3.5rem);
  --step-4: clamp(2.9rem, 1.6rem + 6.4vw, 6rem);

  /* space: 8-pt scale */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 5rem; --s9: 8rem;
  --gutter: 1.25rem;
  --maxw: 70rem;
  --measure: 66ch;

  /* shape and motion */
  --r1: 8px; --r2: 12px; --r3: 18px; --r4: 28px; --pill: 980px;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* ease-out-expo */
  --t-fast: 150ms; --t-med: 280ms;
  --tap: 3rem;

  /* palette: light */
  --bg: oklch(0.995 0.001 250);
  --bg-alt: oklch(0.968 0.002 250);
  --surface: oklch(0.998 0.001 250);
  --surface-2: oklch(0.955 0.003 250);
  --text: oklch(0.235 0.004 260);
  --text-muted: oklch(0.5 0.01 260);
  --line: oklch(0.235 0.004 260 / 0.14);
  --accent: oklch(0.56 0.2 256);
  --accent-hover: oklch(0.5 0.2 256);
  --accent-ink: oklch(0.99 0.002 250);
  --link: oklch(0.5 0.19 258);
  --info: oklch(0.5 0.19 258);
  --good: oklch(0.5 0.14 150);
  --caution: oklch(0.5 0.12 65);
  --danger: oklch(0.5 0.2 27);
  --focus: oklch(0.56 0.2 256);
  --glass: oklch(0.995 0.001 250 / 0.72);
  --shadow: 0 1px 2px oklch(0.2 0 0 / 0.04), 0 18px 50px -24px oklch(0.2 0 0 / 0.28);
  --shadow-lg: 0 2px 6px oklch(0.2 0 0 / 0.05), 0 40px 90px -30px oklch(0.2 0 0 / 0.4);
  color-scheme: light;
}

:root[data-theme="dark"], .on-dark {
  --bg: oklch(0.145 0.003 260);
  --bg-alt: oklch(0.19 0.004 260);
  --surface: oklch(0.2 0.004 260);
  --surface-2: oklch(0.26 0.005 260);
  --text: oklch(0.97 0.002 260);
  --text-muted: oklch(0.74 0.008 260);
  --line: oklch(0.97 0.002 260 / 0.16);
  --accent: oklch(0.66 0.19 252);
  --accent-hover: oklch(0.72 0.17 252);
  --accent-ink: oklch(0.14 0.003 260);
  --link: oklch(0.74 0.15 250);
  --info: oklch(0.74 0.15 250);
  --good: oklch(0.78 0.15 150);
  --caution: oklch(0.84 0.13 85);
  --danger: oklch(0.76 0.15 27);
  --focus: oklch(0.74 0.15 250);
  --glass: oklch(0.145 0.003 260 / 0.72);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 18px 50px -24px oklch(0 0 0 / 0.7);
  --shadow-lg: 0 2px 6px oklch(0 0 0 / 0.4), 0 40px 90px -30px oklch(0 0 0 / 0.8);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.145 0.003 260);
    --bg-alt: oklch(0.19 0.004 260);
    --surface: oklch(0.2 0.004 260);
    --surface-2: oklch(0.26 0.005 260);
    --text: oklch(0.97 0.002 260);
    --text-muted: oklch(0.74 0.008 260);
    --line: oklch(0.97 0.002 260 / 0.16);
    --accent: oklch(0.66 0.19 252);
    --accent-hover: oklch(0.72 0.17 252);
    --accent-ink: oklch(0.14 0.003 260);
    --link: oklch(0.74 0.15 250);
    --info: oklch(0.74 0.15 250);
    --good: oklch(0.78 0.15 150);
    --caution: oklch(0.84 0.13 85);
    --danger: oklch(0.76 0.15 27);
    --focus: oklch(0.74 0.15 250);
    --glass: oklch(0.145 0.003 260 / 0.72);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 18px 50px -24px oklch(0 0 0 / 0.7);
    --shadow-lg: 0 2px 6px oklch(0 0 0 / 0.4), 0 40px 90px -30px oklch(0 0 0 / 0.8);
    color-scheme: dark;
  }
}

@media (min-width: 48rem) { :root { --gutter: 2rem; } }