/* Hallmark · genre: playful · macrostructure: Ecosystem Index · theme: Hum (light cream · rounded-sans · multi-accent)
 * nav: N3 Side-rail · footer: Ft5 Statement · enrichment: real game screenshots (covers) · studied: yes · DNA-source: url
 * source-url: https://www.crazygames.com/ · studied DNA kept: persistent left rail + top search + mood chips + bento lead block + horizontal rails + 16:9 tiles
 * theme drift: source is dark; this build is light with a dark toggle (Divergeix rule: never dark-only)
 * contrast: pass (40–41) · pre-emit critique: P4 H4 E4 S4 R4 V4
 */
:root {
  /* paper + ink */
  --color-paper:   oklch(97% 0.012 95);
  --color-paper-2: oklch(94% 0.016 95);
  --color-paper-3: oklch(91% 0.020 95);
  --color-ink:     oklch(20% 0.012 250);
  --color-ink-2:   oklch(42% 0.014 250);
  --color-ink-3:   oklch(58% 0.014 250);
  --color-rule:    oklch(86% 0.018 95);
  --color-surface: oklch(99% 0.008 95);

  /* accents */
  --color-accent:       oklch(86% 0.18 95);
  --color-accent-deep:  oklch(70% 0.17 92);
  --color-accent-2:     oklch(66% 0.18 235);
  --color-accent-2-deep:oklch(52% 0.17 235);
  --color-accent-3:     oklch(68% 0.24 18);
  --color-accent-3-deep:oklch(54% 0.22 18);
  --color-mint:         oklch(80% 0.16 150);
  --color-mint-deep:    oklch(62% 0.15 150);
  --color-lavender:     oklch(74% 0.16 305);
  --color-lavender-deep:oklch(58% 0.16 305);
  --color-focus:        oklch(52% 0.17 235);
  --color-on-accent:    oklch(20% 0.012 250);

  /* shadows */
  --shadow-contact: 0 1px 2px oklch(20% 0.012 250 / 0.08);
  --shadow-ambient: 0 12px 32px -16px oklch(20% 0.012 250 / 0.22);
  --shadow-lift:    0 18px 40px -18px oklch(20% 0.012 250 / 0.32);
  --btn-cast:       oklch(76% 0.20 95 / 0.45);

  /* type */
  --font-display: "Plus Jakarta Sans", "Geist", ui-rounded, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Geist", ui-rounded, system-ui, sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-display-s: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  --text-display:   clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);

  /* space (4 pt) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* radii */
  --radius-card:  20px;
  --radius-tile:  14px;
  --radius-input: 12px;
  --radius-pill:  999px;

  /* motion */
  --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-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --rule-hair: 1px;
  --rail-w: 15rem;
  --topbar-h: 4.25rem;
}

[data-theme="dark"] {
  --color-paper:   oklch(19% 0.014 260);
  --color-paper-2: oklch(23% 0.016 260);
  --color-paper-3: oklch(28% 0.018 260);
  --color-ink:     oklch(95% 0.010 95);
  --color-ink-2:   oklch(78% 0.012 95);
  --color-ink-3:   oklch(64% 0.012 95);
  --color-rule:    oklch(32% 0.016 260);
  --color-surface: oklch(24% 0.016 260);
  --color-on-accent: oklch(20% 0.012 250);
  --shadow-contact: 0 1px 2px oklch(10% 0.01 260 / 0.5);
  --shadow-ambient: 0 12px 32px -16px oklch(10% 0.01 260 / 0.7);
  --shadow-lift:    0 18px 40px -18px oklch(10% 0.01 260 / 0.8);
  --btn-cast:       oklch(76% 0.20 95 / 0.25);
}