/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: design.md (Radial)
 * design-system: design.md · designed-as-app · family: Homepage
 *
 * Mirrors the app's canonical token block in src/styles.scss (:root and html.app-dark). The
 * homepage is a separate static site with no build step, so it cannot import the SCSS; keep the
 * values here in step with it. Dark mode follows the visitor's OS preference unless they pick a
 * theme with the nav toggle (theme.js), which sets data-theme on the root.
 */

/* --- Faces (same self-hosted Geist files the app serves from /fonts/) --- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-mono-500.woff2') format('woff2');
}

/* --- Tokens · light --- */
:root {
  color-scheme: light dark;

  --accent-h: 70;
  --accent: oklch(0.72 0.17 var(--accent-h));
  --accent-soft: oklch(0.85 0.16 var(--accent-h) / 0.14);
  --accent-tint: oklch(0.85 0.16 var(--accent-h) / 0.07);
  --accent-line: oklch(0.85 0.16 var(--accent-h) / 0.35);
  --accent-ink: oklch(0.2 0.04 var(--accent-h));
  --accent-pressed: color-mix(in oklab, var(--accent) 88%, oklch(0 0 0));
  --accent-fg-on-soft: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --focus: var(--accent);

  --emergency: oklch(0.66 0.18 25);
  --emergency-soft: oklch(0.66 0.18 25 / 0.14);
  --emergency-line: oklch(0.66 0.18 25 / 0.35);
  --info: oklch(0.7 0.13 240);
  --info-tint: oklch(0.7 0.13 240 / 0.07);
  --info-soft: oklch(0.7 0.13 240 / 0.14);
  --personal: oklch(0.7 0.14 295);
  --personal-soft: oklch(0.7 0.14 295 / 0.14);
  --personal-line: oklch(0.7 0.14 295 / 0.35);
  --anchor-start: oklch(0.62 0.18 145);
  --anchor-end: oklch(0.58 0.22 26);
  --ink-on-saturated: oklch(0.98 0 0);

  --surface: oklch(0.98 0 0);
  --surface-raised: oklch(0.995 0 0);
  --surface-overlay: oklch(0.99 0 0);
  --surface-recess: oklch(0.955 0 0);

  --ink: oklch(0.18 0 0);
  --ink-2: oklch(0.38 0 0);
  --ink-3: oklch(0.52 0 0);
  --ink-4: oklch(0.66 0 0);

  --line: oklch(0.86 0 0 / 0.9);
  --line-soft: oklch(0.9 0 0 / 0.7);
  --street: oklch(0.9 0 0);
  --street-major: oklch(0.86 0 0);
  --block: oklch(0.965 0 0);
  --park: oklch(0.62 0.18 145 / 0.1);
  --water: oklch(0.7 0.13 240 / 0.16);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 1px oklch(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.04);
  --shadow-lg: 0 8px 28px oklch(0 0 0 / 0.12), 0 4px 8px oklch(0 0 0 / 0.06);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --gap-8: 72px;
  --gap-9: 112px;

  --font-sans: 'Geist', system-ui, sans-serif;
  --font-display: 'Geist Mono', ui-monospace, monospace;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-body: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-display-s: clamp(1.625rem, 2.6vw + 0.6rem, 2.375rem);
  --fs-display: clamp(2.125rem, 3.4vw + 0.5rem, 3.25rem);

  --measure: 36rem;
  --page-max: 72rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-draw: 1200ms;
}

/* --- Tokens · dark: the visitor's explicit choice, else their OS preference --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: oklch(0.82 0.17 var(--accent-h));

    --surface: oklch(0.16 0 0);
    --surface-raised: oklch(0.205 0 0);
    --surface-overlay: oklch(0.25 0 0);
    --surface-recess: oklch(0.18 0 0);

    --ink: oklch(0.96 0 0);
    --ink-2: oklch(0.78 0 0);
    --ink-3: oklch(0.6 0 0);
    --ink-4: oklch(0.45 0 0);

    --line: oklch(0.32 0 0 / 0.6);
    --line-soft: oklch(0.32 0 0 / 0.3);
    --street: oklch(0.25 0 0);
    --street-major: oklch(0.29 0 0);
    --block: oklch(0.185 0 0);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 1px 1px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35), 0 2px 4px oklch(0 0 0 / 0.25);
    --shadow-lg: 0 14px 40px oklch(0 0 0 / 0.5), 0 4px 8px oklch(0 0 0 / 0.3);
  }
}

:root[data-theme='dark'] {
  --accent: oklch(0.82 0.17 var(--accent-h));

  --surface: oklch(0.16 0 0);
  --surface-raised: oklch(0.205 0 0);
  --surface-overlay: oklch(0.25 0 0);
  --surface-recess: oklch(0.18 0 0);

  --ink: oklch(0.96 0 0);
  --ink-2: oklch(0.78 0 0);
  --ink-3: oklch(0.6 0 0);
  --ink-4: oklch(0.45 0 0);

  --line: oklch(0.32 0 0 / 0.6);
  --line-soft: oklch(0.32 0 0 / 0.3);
  --street: oklch(0.25 0 0);
  --street-major: oklch(0.29 0 0);
  --block: oklch(0.185 0 0);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 1px 1px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35), 0 2px 4px oklch(0 0 0 / 0.25);
  --shadow-lg: 0 14px 40px oklch(0 0 0 / 0.5), 0 4px 8px oklch(0 0 0 / 0.3);
}

:root[data-theme='light'] {
  color-scheme: light;
}

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