/* Hallmark · genre: modern-minimal · macrostructure: Editorial Bento · tone: confident-studio
 * theme: custom (vibe: "light studio, mosaic colour")
 * display: Bricolage Grotesque · body: Geist · mono: Geist Mono · nav: N2 Inline bar · footer: Ft5 Statement
 * paper: oklch(98.6% 0.004 95) warm white · accent: oklch(53% 0.23 285) violet
 * mosaic: coral · amber · magenta · violet · blue · teal (from logo)
 * axes: light / geometric-sans / multi-colour
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 */

:root {

  /* ── Canvas (paper) ──────────────────────────── */
  --color-paper:       oklch(98.6% 0.004 95);
  --color-paper-2:     oklch(96.4% 0.005 95);
  --color-paper-3:     oklch(93.6% 0.006 95);
  --color-paper-ink:   oklch(20%   0.02  280);   /* dark surface (footer / feature) */
  --color-paper-glass: oklch(98.6% 0.004 95 / 0.78);

  /* ── Ink (text) ──────────────────────────────── */
  --color-ink:    oklch(22% 0.018 280);
  --color-ink-2:  oklch(42% 0.014 280);
  --color-ink-3:  oklch(56% 0.012 280);
  --color-on-dark:    oklch(97% 0.004 95);
  --color-on-dark-2:  oklch(78% 0.010 280);

  /* ── Primary accent (violet — AI / product) ──── */
  --color-accent:      oklch(53% 0.23  285);
  --color-accent-hi:   oklch(47% 0.23  285);
  --color-accent-soft: oklch(53% 0.23  285 / 0.10);

  /* ── Mosaic palette (from the logo) ──────────── */
  --c-coral:   oklch(63% 0.21  28);
  --c-amber:   oklch(72% 0.16  68);
  --c-magenta: oklch(58% 0.24  350);
  --c-violet:  oklch(53% 0.23  285);
  --c-blue:    oklch(56% 0.18  250);
  --c-teal:    oklch(60% 0.13  185);

  /* soft tints for cell backgrounds */
  --c-coral-soft:   oklch(63% 0.21  28  / 0.10);
  --c-amber-soft:   oklch(72% 0.16  68  / 0.13);
  --c-magenta-soft: oklch(58% 0.24  350 / 0.09);
  --c-violet-soft:  oklch(53% 0.23  285 / 0.09);
  --c-blue-soft:    oklch(56% 0.18  250 / 0.09);
  --c-teal-soft:    oklch(60% 0.13  185 / 0.11);

  /* ── Rule (borders) ──────────────────────────── */
  --color-rule:   oklch(22% 0.018 280 / 0.10);
  --color-rule-2: oklch(22% 0.018 280 / 0.18);
  --color-rule-dark: oklch(97% 0.004 95 / 0.12);

  /* ── States ──────────────────────────────────── */
  --color-focus:   oklch(53% 0.23 285);
  --color-success: oklch(55% 0.15 150);

  /* ── Fonts ───────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* ── Type scale (major third × 1.25) ─────────── */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1.00rem;
  --text-md:        1.25rem;
  --text-lg:        1.563rem;
  --text-xl:        1.953rem;
  --text-2xl:       2.441rem;
  --text-3xl:       3.052rem;
  --text-display-s: clamp(2.2rem, 3.5vw + 0.5rem, 3.4rem);
  --text-display:   clamp(2.9rem, 5.5vw + 0.5rem, 5.4rem);

  /* ── Spacing (4 pt scale) ────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* ── Radii ───────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-pill: 100px;

  /* ── Motion ──────────────────────────────────── */
  --dur-short:   120ms;
  --dur-mid:     240ms;
  --dur-long:    440ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Layout ──────────────────────────────────── */
  --nav-h:   68px;
  --max-w: 1200px;
  --z-nav:   100;
  --z-drawer: 90;
}