/* Hallmark · genre: playful · theme: Hum · design tokens (portable)
 * Paper band: light (L 97%) · Display: rounded-sans · Accent hue: multi (pear/cyan/coral)
 * All colours in OKLCH. Reference these by name — never inline raw values in the page CSS. */

:root {
  /* — Paper / ink ————————————————————————————————— */
  --color-paper:    oklch(97% 0.012 95);   /* cream, slight pear pull */
  --color-paper-2:  oklch(94% 0.016 95);   /* tinted band */
  --color-paper-3:  oklch(91% 0.020 95);   /* deeper hover / hairline fill */
  --color-ink:      oklch(20% 0.012 250);  /* near-black, cool tilt (never pure black) */
  --color-ink-2:    oklch(44% 0.015 250);  /* muted ink for labels / secondary copy */
  --color-line:     oklch(20% 0.012 250 / 0.14);

  /* — Accents (multi; each owns its own surface) ——————————— */
  --color-accent:      oklch(86% 0.18 95);   /* pear-yellow — primary action, character mark */
  --color-accent-deep: oklch(72% 0.19 95);   /* pear edge (button thickness) */
  --color-accent-2:    oklch(66% 0.18 235);  /* sky-cyan — links, hover tints */
  --color-accent-3:    oklch(68% 0.24 18);   /* coral-red — one high-energy moment */
  --color-mint:        oklch(80% 0.16 150);  /* soft green — success */
  --color-lavender:    oklch(74% 0.16 305);  /* decorative, occasional */
  --color-focus:       oklch(55% 0.20 235);  /* focus ring */

  /* — Tints (accent at low opacity for card rests / bands) ———— */
  --tint-pear:  oklch(86% 0.18 95 / 0.10);
  --tint-cyan:  oklch(66% 0.18 235 / 0.09);
  --tint-coral: oklch(68% 0.24 18 / 0.08);

  /* — Type ———————————————————————————————————————— */
  --font-display: "Plus Jakarta Sans", "Geist", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Geist", system-ui, sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.9rem;
  --text-base: 1.05rem;
  --text-lg:   1.25rem;
  --text-xl:   1.6rem;
  --text-2xl:  clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem);
  --text-3xl:  clamp(2.2rem, 1.2rem + 4vw, 3.4rem);
  --text-display-s: clamp(2.6rem, 1rem + 6vw, 5rem);
  --text-display:   clamp(3rem, 0.5rem + 10vw, 8.5rem);

  /* — Spacing (4pt scale) ———————————————————————————— */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  /* — Radii ———————————————————————————————————————— */
  --radius-card:  20px;
  --radius-input: 12px;
  --radius-pill:  999px;

  /* — Rules ———————————————————————————————————————— */
  --rule-hair:  1px;
  --rule-thick: 3px;

  /* — Layout ——————————————————————————————————————— */
  --page-max:    72rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);

  /* — Motion ——————————————————————————————————————— */
  --dur-fast: 140ms;
  --dur-mid:  220ms;
  --dur-slow: 600ms;
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
}