/* ============================================================
   PRISM — Design Tokens
   Rebrand the entire template by editing this file only.
   Philosophy: neutral canvas, ONE pastel field, saturated hues
   reserved exclusively for the 3D sticker objects + logo.
   ============================================================ */

:root {
  /* Sticker accents — the only saturated colours on the page */
  --hue-a: oklch(78% 0.16 155);   /* mint green — growth, money */
  --hue-b: oklch(72% 0.20 25);    /* coral-pink — energy */
  --hue-c: oklch(88% 0.15 95);    /* sunshine yellow — reward */
  --hue-d: oklch(78% 0.12 235);   /* sky blue — trust */

  /* The pastel field (hero portrait panel, CTA card) */
  --pastel-from: oklch(92% 0.03 150);  /* soft mint */
  --pastel-mid:  oklch(93% 0.03 230);  /* soft sky */
  --pastel-to:   oklch(92% 0.03 300);  /* soft lilac */

  /* Canvas + surfaces */
  --color-bg: oklch(96.5% 0.004 90);
  --color-card: oklch(99.5% 0.002 90);
  --color-ink: oklch(20% 0.01 270);       /* near-black */
  --color-ink-dim: oklch(45% 0.008 270);
  --color-ink-faint: oklch(62% 0.006 270);
  --color-invert-bg: oklch(20% 0.01 270); /* dark stat band / buttons */
  --color-invert-ink: oklch(97% 0.004 90);

  --line: oklch(0% 0 0 / 0.09);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.04), 0 12px 32px -12px oklch(0% 0 0 / 0.12);
  --shadow-pop: 0 20px 48px -16px oklch(0% 0 0 / 0.25);

  /* Type — one confident grotesk */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --text-hero: clamp(2.5rem, 1.1rem + 5.4vw, 5.5rem);
  --text-h2: clamp(1.9rem, 1rem + 3vw, 3.75rem);
  --text-h3: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
  --text-lead: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --text-small: 0.85rem;
  --text-micro: 0.72rem;

  /* Rhythm */
  --space-section: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);
  --space-block: clamp(1.75rem, 1.25rem + 2vw, 3.5rem);
  --gutter: clamp(1.1rem, 3.5vw, 3.5rem);
  --max-width: 82rem;

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 400ms;
  --duration-slow: 850ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radii — this style wants soft, generous corners */
  --radius-pill: 999px;
  --radius-card: 1.75rem;
  --radius-panel: 2.25rem;
}