/* Hallmark · route: custom (bespoke) · structure: the page is a dig — street, then five strata down to a cave
 * idea: "scroll = dig": one stick figure tunnels down the right edge while the strata show what Arc is made of
 * paper: oklch(98% 0.012 230) · accent: oklch(83% 0.095 232) · display: Shantell Sans · body: Patrick Hand
 * axes: light / hand-lettered / cool sky-blue (Arc identity) · gates: all-pass · studied: no (source is the user's comic)
 */
:root {
  /* paper and ink — the comic, tinted toward Arc's sky */
  --color-paper: oklch(98% 0.012 230);
  --color-paper-note: oklch(99.2% 0.006 230);
  --color-ink: oklch(24% 0.04 256);
  --color-ink-soft: oklch(43% 0.04 250);
  --color-ink-faint: oklch(24% 0.04 256 / 0.18);

  /* one accent: sky highlighter, sticky notes, the gem */
  --color-accent: oklch(83% 0.095 232);
  --color-accent-deep: oklch(71% 0.13 240);
  --color-accent-glow: oklch(88% 0.08 225 / 0.3);

  /* strata, sky getting deeper on the way down */
  --color-topsoil: oklch(94.5% 0.024 228);
  --color-clay: oklch(89.5% 0.04 232);
  --color-rock: oklch(84% 0.05 236);
  --color-bedrock: oklch(76% 0.065 242);
  --color-cave: oklch(26% 0.055 256);
  --color-cave-ink: oklch(95% 0.018 225);
  --color-cave-soft: oklch(79% 0.045 230);
  --color-tunnel: oklch(19% 0.045 258);

  --color-focus: oklch(50% 0.18 265);
  --color-focus-dark: oklch(83% 0.095 232);

  --font-display: "Shantell Sans", "Patrick Hand", "Comic Neue", ui-rounded, sans-serif;
  --font-body: "Patrick Hand", "Shantell Sans", ui-rounded, sans-serif;

  --text-xs: 0.95rem;
  --text-sm: 1.1rem;
  --text-md: 1.3rem;
  --text-lg: 1.6rem;
  --text-xl: 2.1rem;
  --text-2xl: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  --text-display: clamp(2.5rem, 1.2rem + 4.6vw, 4.8rem);
  --text-number: clamp(3.6rem, 2rem + 6vw, 6.8rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  --rule-ink: 3px;
  --radius-note: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-boil: 540ms;

  /* the shaft column on the right edge */
  --shaft-w: clamp(76px, 11vw, 150px);
  --gutter: clamp(16px, 4vw, 48px);
  --shaft-gap: var(--space-xl);
}