/* tokens — phiwut · custom theme: dark workshop · Hallmark */

:root {
  /* ── color — dark workshop ────────────────────────────── */
  --color-paper:         oklch(11% 0.010 65);
  --color-surface:       oklch(16% 0.012 65);
  --color-surface-2:     oklch(21% 0.012 65);
  --color-border:        oklch(26% 0.010 60);
  --color-ink:           oklch(94% 0.005 75);
  --color-ink-2:         oklch(62% 0.008 70);
  --color-ink-3:         oklch(38% 0.006 70);
  --color-accent:        oklch(78% 0.160 80);    /* amber */
  --color-accent-2:      oklch(70% 0.130 192);   /* cyan */
  --color-focus:         oklch(78% 0.160 80);
  --color-warmth-glow:   oklch(20% 0.025 80 / 0.28);
  --color-header-bg:     oklch(11% 0.010 65 / 0.88);
  --shadow-tile:         0 12px 32px oklch(0% 0 0 / 0.28);

  /* ── per-tile accents ─────────────────────────────────── */
  --accent-battery:      oklch(78% 0.160 80);    /* amber */
  --accent-tichu:        oklch(72% 0.150 20);    /* red-orange */
  --accent-start:        oklch(70% 0.130 192);   /* cyan */
  --accent-qwirkle:      oklch(74% 0.170 145);   /* green */

  /* ── qwirkle tile palette ─────────────────────────────── */
  --qt-red:    oklch(62% 0.200 20);
  --qt-orange: oklch(68% 0.180 50);
  --qt-yellow: oklch(82% 0.160 95);
  --qt-green:  oklch(65% 0.150 145);
  --qt-blue:   oklch(60% 0.150 240);
  --qt-purple: oklch(58% 0.180 290);

  /* ── fonts ────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── type scale ───────────────────────────────────────── */
  --text-display: clamp(2.25rem, 5.5vw, 3.75rem);
  --text-xl:      1.25rem;
  --text-lg:      1.125rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-2xs:     0.65rem;

  /* ── spacing (4-pt base) ──────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ── layout ───────────────────────────────────────────── */
  --container-max: 1100px;
  --pad:           clamp(1.5rem, 4vw, 4rem);
  --radius-tile:   10px;
  --radius-sm:     5px;
  --gap-bento:     clamp(0.5rem, 1vw, 0.75rem);
}