/* Design tokens: Libi's series look (BECOMING LIBI). One dark theme, one amber accent.
   Shape rule: interactive controls are pills, surfaces 18px, inputs 12px, portraits are arches.
   Fonts are self-hosted subsets (OFL, see fonts/OFL.txt), so the CSP stays 'self'. */
@font-face {
  font-family: "Heebo";
  src: url("../fonts/heebo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("../fonts/frank-ruhl-libre.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --ink: #12161e;
  --ink-deep: #0b0e14;
  --ink-raised: #181e29;
  --ink-glow: #1d2431;
  --cream: #f4ead8;
  --cream-dim: #cfc6b6;
  --cream-mute: #a39b8c;
  --amber: #e8a33a;
  --amber-bright: #f1b85c;
  --amber-tint: rgb(232 163 58 / 0.12);
  --amber-line: rgb(232 163 58 / 0.4);
  --line: rgb(244 234 216 / 0.1);
  --line-strong: rgb(244 234 216 / 0.22);
  --line-control: rgb(244 234 216 / 0.4); /* input and option edges: 3:1 on the card */
  --danger: #ff9b8a;

  --font-display: "Frank Ruhl Libre", "Times New Roman", serif;
  --font-body: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
  --step-3: clamp(2rem, 1.5rem + 2.1vw, 3.15rem);
  --step-4: clamp(2.4rem, 1.55rem + 3.4vw, 4.4rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1200px;
  --space-section: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  --header-h: 68px;

  --radius-surface: 18px;
  --radius-input: 12px;
  --radius-pill: 999px;
  --shadow-raised: 0 28px 60px -28px rgb(4 6 10 / 0.75);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers: header < sticky CTA < skip link < film grain (pointer-events: none). */
  --z-header: 20;
  --z-sticky: 30;
  --z-skip: 40;
  --z-grain: 50;
}
