/* Hallmark · design-system: design.md · designed-as-app
 * Tokens for ereynalabs-www. Canonical source. Page CSS must reference these
 * by name (var(--color-accent)) — never inline hex/rgba/oklch values.
 */

:root {
  /* ── Paper ─────────────────────────────────────────────────────────── */
  --color-paper:    oklch(98% 0.005 90);
  --color-paper-2:  oklch(95% 0.008 90);
  --color-paper-3:  oklch(91% 0.012 90);

  /* ── Ink ───────────────────────────────────────────────────────────── */
  --color-ink:      oklch(20% 0.030 270);
  --color-ink-2:    oklch(48% 0.025 260);
  --color-ink-3:    oklch(66% 0.018 255);

  /* ── Rules ─────────────────────────────────────────────────────────── */
  --color-rule:     oklch(20% 0.030 270 / 0.10);
  --color-rule-2:   oklch(20% 0.030 270 / 0.22);

  /* ── Accents ───────────────────────────────────────────────────────── */
  --color-accent:         oklch(43% 0.16 265);
  --color-accent-faint:   oklch(43% 0.16 265 / 0.08);
  --color-accent-glow:    oklch(43% 0.16 265 / 0.18);
  --color-accent-ink:     oklch(98% 0.005 90);

  --color-accent-2:       oklch(50% 0.13 60);
  --color-accent-2-faint: oklch(50% 0.13 60 / 0.08);
  --color-accent-2-glow:  oklch(50% 0.13 60 / 0.18);

  --color-accent-3:       oklch(46% 0.08 240);
  --color-accent-3-faint: oklch(46% 0.08 240 / 0.08);

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

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Libre Baskerville', Georgia, serif;
  --font-mono:    'JetBrains 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:  1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.6rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.8rem, 5vw, 4.5rem);
  --text-display:   clamp(5rem, 11vw, 10.5rem);
  --text-display-s: clamp(3rem, 7vw, 6rem);

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