/* Design tokens for mcj-land-www. Page CSS references these by name
 * (var(--color-accent)) — never inline colour values.
 */

:root {
  color-scheme: light dark;

  /* ── Paper ─────────────────────────────────────────────────────────── */
  --color-paper:    oklch(98% 0.004 120);
  --color-paper-2:  oklch(95.5% 0.007 120);
  --color-paper-3:  oklch(91% 0.010 120);

  /* ── Ink ───────────────────────────────────────────────────────────── */
  --color-ink:      oklch(19% 0.020 200);
  --color-ink-2:    oklch(44% 0.020 200);
  --color-ink-3:    oklch(54% 0.015 200);

  /* ── Rules ─────────────────────────────────────────────────────────── */
  --color-rule:     oklch(19% 0.020 200 / 0.10);
  --color-rule-2:   oklch(19% 0.020 200 / 0.22);

  /* ── Accents ───────────────────────────────────────────────────────── */
  /* Accent 1 — signal green (consulting / primary actions). */
  --color-accent:         oklch(46% 0.12 165);
  --color-accent-faint:   oklch(46% 0.12 165 / 0.08);
  --color-accent-ink:     oklch(98% 0.004 120);
  /* Accent 2 — ember (development). */
  --color-accent-2:       oklch(55% 0.17 40);
  --color-accent-2-faint: oklch(55% 0.17 40 / 0.09);
  /* Accent 3 — ink blue (training). */
  --color-accent-3:       oklch(45% 0.12 255);
  --color-accent-3-faint: oklch(45% 0.12 255 / 0.08);
  /* Accent 4 — gold (shops). */
  --color-accent-4:       oklch(56% 0.12 85);
  --color-accent-4-faint: oklch(56% 0.12 85 / 0.10);

  --color-focus:    var(--color-accent);

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Space — 4pt scale ─────────────────────────────────────────────── */
  --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: 4.5rem;
  --space-3xl: 7rem;

  /* ── Type scale ────────────────────────────────────────────────────── */
  --text-xs:  0.72rem;
  --text-sm:  0.85rem;
  --text-md:  1.05rem;
  --text-lg:  1.25rem;
  --text-xl:  1.6rem;
  --text-2xl: 2.1rem;
  --text-3xl: clamp(2rem, 3.6vw, 3.2rem);
  --text-display: clamp(2.6rem, 6vw, 5.5rem);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-short: 180ms;
  --dur-long:  440ms;
}

/* ── Dark ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:    oklch(17% 0.012 200);
    --color-paper-2:  oklch(21% 0.014 200);
    --color-paper-3:  oklch(26% 0.016 200);
    --color-ink:      oklch(95% 0.006 120);
    --color-ink-2:    oklch(78% 0.012 150);
    --color-ink-3:    oklch(66% 0.012 170);
    --color-rule:     oklch(95% 0.006 120 / 0.10);
    --color-rule-2:   oklch(95% 0.006 120 / 0.22);
    --color-accent:         oklch(74% 0.13 165);
    --color-accent-faint:   oklch(74% 0.13 165 / 0.10);
    --color-accent-ink:     oklch(17% 0.012 200);
    --color-accent-2:       oklch(72% 0.15 45);
    --color-accent-2-faint: oklch(72% 0.15 45 / 0.10);
    --color-accent-3:       oklch(72% 0.11 255);
    --color-accent-3-faint: oklch(72% 0.11 255 / 0.10);
    --color-accent-4:       oklch(80% 0.12 88);
    --color-accent-4-faint: oklch(80% 0.12 88 / 0.10);
  }
}