/* Hallmark · tokens · theme: studied-DNA (source: allerstudio.com, adapted to the yumm-lab brand)
 * paper oklch(96.5% 0.003 250) · accent oklch(91% 0.2 110) "volt" · Chakra Petch + Inter / IBM Plex Sans Thai
 * axes: light paper · technical squared display · chromatic-other (yellow-lime)
 */
:root {
  color-scheme: light;

  --color-paper: oklch(96.5% 0.003 250);
  --color-paper-2: oklch(93.5% 0.004 250);
  --color-surface: oklch(99.5% 0.001 250);
  --color-ink: oklch(17% 0.006 250);
  --color-ink-2: oklch(17% 0.006 250 / 0.64);
  --color-ink-3: oklch(17% 0.006 250 / 0.5);
  --color-rule: oklch(17% 0.006 250 / 0.12);
  --color-rule-strong: oklch(17% 0.006 250 / 0.24);

  --color-accent: oklch(91% 0.2 110);          /* volt: the one accent */
  --color-accent-deep: oklch(80% 0.19 114);
  --color-accent-soft: oklch(91% 0.2 110 / 0.35);
  --color-olive: oklch(52% 0.13 115);
  --color-blush: oklch(74% 0.13 15);           /* mascot cheeks */          /* liquid depth in the particle flask */
  --color-signal: oklch(62% 0.22 25);          /* live dot only */

  --color-night: oklch(15% 0.006 250);
  --color-night-2: oklch(21% 0.006 250);
  --color-on-night: oklch(97% 0.003 250);
  --color-on-night-2: oklch(97% 0.003 250 / 0.6);
  --color-on-night-rule: oklch(97% 0.003 250 / 0.14);
  --color-shadow: oklch(17% 0.006 250 / 0.1);
  --color-focus: oklch(55% 0.2 260);

  --grad-volt: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-deep) 45%, var(--color-night) 100%);

  --font-display: "Chakra Petch", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-label: "JetBrains Mono", "IBM Plex Sans Thai", ui-monospace, monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --text-hero: clamp(3rem, 1rem + 6.4vw, 8.25rem);
  --text-band: clamp(3rem, 1rem + 9vw, 10rem);
  --text-numeral: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 144px;

  --page-max: 1360px;
  --page-gutter: clamp(16px, 4vw, 56px);
  --section-gap: clamp(88px, 11vw, 168px);

  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 240ms;
  --dur-long: 480ms;

  --nav-top: 14px;
  --nav-h: 60px;
}