/* Hallmark · tokens · genre: atmospheric · theme: custom (bold ocean flow)
 * vibe: "deep ocean, heavy type, flowing teal" · paper-band: dark · display-style: display-heavy
 * brand teal: #1AAFAD — oklch(68% 0.113 193)
 */

:root {
  /* ── Paper — deep ocean navy ──────────────────────── */
  --color-paper:   oklch(10% 0.025 220);
  --color-paper-2: oklch(13% 0.022 220);
  --color-paper-3: oklch(16% 0.020 220);
  --color-rule:    oklch(21% 0.018 220);
  --color-rule-2:  oklch(27% 0.016 220);

  /* ── Ink ────────────────────────────────────────────── */
  --color-ink:   oklch(93% 0.007 220);
  --color-ink-2: oklch(64% 0.012 220);
  --color-ink-3: oklch(38% 0.012 220);

  /* ── Accent — brand teal #1AAFAD (~3% usage target) ─── */
  --color-accent:   oklch(68% 0.113 193);
  --color-accent-2: oklch(68% 0.113 193 / 0.14);
  --color-accent-3: oklch(68% 0.113 193 / 0.07);
  --color-focus:    oklch(68% 0.113 193);

  /* ── CTA surface (full-bleed teal section) ───────────── */
  --color-cta-bg:  oklch(58% 0.113 193);
  --color-cta-ink: oklch(10% 0.025 220);

  /* ── Fonts ──────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Geist',               system-ui, sans-serif;
  --font-mono:    'Geist Mono',          ui-monospace, monospace;

  /* ── Type scale (1.25 major-third, 16px base) ──────── */
  --text-xs:        0.64rem;
  --text-sm:        0.80rem;
  --text-base:      1.00rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-4xl:       3.8147rem;
  --text-display-s: clamp(2.4rem, 5vw + 1rem, 4.2rem);
  --text-display:   clamp(5rem, 22vw, 16rem);

  /* ── Spacing (4pt scale) ────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-sm:  var(--space-4);
  --space-md:  var(--space-8);
  --space-lg:  var(--space-12);
  --space-xl:  var(--space-16);
  --space-2xl: var(--space-24);
  --space-3xl: var(--space-32);

  /* ── Motion ─────────────────────────────────────────── */
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
  --dur-reveal:  560ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Border radius ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
}