/* Hallmark · tokens · theme: studied-DNA (source: user video reference, image mode) · genre: modern-minimal */
:root {
  /* Paper and ink */
  --color-paper: oklch(99.2% 0.002 250);
  --color-surface: oklch(97.4% 0.004 240);
  --color-surface-raised: oklch(100% 0 0);
  --color-ink: oklch(19% 0.012 250);
  --color-ink-soft: oklch(38% 0.012 250);
  --color-muted: oklch(52% 0.01 250);
  --color-line: oklch(91.5% 0.005 250);
  --color-line-strong: oklch(84% 0.006 250);

  /* Hero sky: sampled from the ridge render, darkened at the top for white text */
  --color-sky-top: oklch(45% 0.022 235);
  --color-sky-mid: oklch(51% 0.021 233);
  --color-sky-image-top: oklch(64.5% 0.018 230);
  --color-on-sky: oklch(99% 0 0);
  --color-on-sky-soft: oklch(94% 0.006 230);
  --color-chip-on-sky: oklch(100% 0 0 / 0.14);
  --color-chip-line-on-sky: oklch(100% 0 0 / 0.42);
  --color-chip-on-sky-hover: oklch(100% 0 0 / 0.24);
  --color-glass-on-sky: oklch(28% 0.02 235 / 0.42);
  --color-glass-on-sky-hover: oklch(28% 0.02 235 / 0.58);

  /* One accent: the red of the vessels in the render, used only for small signals */
  --color-accent: oklch(55% 0.17 25);
  --color-accent-soft: oklch(95% 0.03 25);
  --color-ok: oklch(62% 0.14 150);

  /* Chart on the dark reach card: one hue (the sky grey-blue), text stays in neutral inks */
  --color-chart-bar: oklch(78% 0.045 232);
  --color-chart-bar-hover: oklch(90% 0.04 232);
  --color-chart-text: oklch(92% 0.006 240);
  --color-chart-muted: oklch(72% 0.01 240);

  --color-focus: oklch(55% 0.17 25);
  --color-scrim: oklch(19% 0.012 250 / 0.72);

  /* Type */
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  --text-hero: clamp(2.35rem, 3.6vw + 1.1rem, 3.75rem);
  --text-wordmark: clamp(2.5rem, 10.5vw, 10.5rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --tracking-display: -0.032em;
  --tracking-tight: -0.015em;

  /* Space (4-pt scale) */
  --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: 4.5rem;
  --space-3xl: 7rem;

  /* Shape */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px oklch(19% 0.012 250 / 0.05), 0 6px 20px oklch(19% 0.012 250 / 0.06);
  --shadow-knob: 0 2px 10px oklch(19% 0.012 250 / 0.22);

  /* Layout */
  --measure-page: 47.5rem;
  --measure-wide: 70rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 700ms;
}