/* ============================================================================
 * Odahl — Design Tokens
 * The single source of truth. Every other stylesheet imports from here.
 * ============================================================================ */

:root {
  /* ── Colour: Cream (backgrounds, 70% dominance) ──────────────────── */
  --bone:           #F0E9D0;
  --bone-warm:      #F5EFDD;
  --bone-deep:      #E8E8C8;

  /* ── Colour: Aether (Vespera lavender, the brand accent) ─────────── */
  --aether-trace:   #E8DFEF;
  --aether-veil:    #D8CDE4;
  --aether:         #B8A9C9;
  --aether-deep:    #8E7BA3;

  /* ── Colour: Ember (clay, secondary accent + errors/warnings) ─────── */
  --ember-veil:     #EBD8D3;
  --ember:          #D4B4AE;
  --ember-deep:     #A88882;

  /* ── Colour: Ash (sage, technical tone) ────────────────────────────── */
  --ash-light:      #A8B4AC;
  --ash:            #6c7d70;
  --ash-deep:       #44524A;

  /* ── Colour: Ink (primary text, never pure black) ─────────────────── */
  --ink:            #2A2438;
  --ink-soft:       #4A435A;
  --ink-mute:       #6A6378;

  /* ── Colour: Seam (default border colour) ─────────────────────────── */
  --seam:           #E0D9BE;
  --seam-warm:      #DCD3B5;

  /* ── Class tonal assignments ─────────────────────────────────────── */
  --class-cardinal: var(--aether-deep);
  --class-proper:   var(--aether);
  --class-minor:    var(--ash);
  --class-minima:   var(--ember);

  /* ── Type families ───────────────────────────────────────────────── */
  --display:        'Cormorant Garamond', Georgia, serif;
  --body:           'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:           'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── Type scale ──────────────────────────────────────────────────── */
  --type-h1:        clamp(2.4rem, 6vw, 5rem);
  --type-h2:        clamp(1.8rem, 3.5vw, 2.8rem);
  --type-h3:        1.4rem;
  --type-h4:        1.15rem;
  --type-eyebrow:   0.95rem;
  --type-body:      1rem;
  --type-body-sm:   0.92rem;
  --type-button:    0.95rem;
  --type-code:      0.88rem;
  --type-stat:      1.4rem;
  --type-fineprint: 0.72rem;

  /* ── Spacing scale (geometric, not arbitrary) ─────────────────────── */
  --gap-xs:         0.4rem;
  --gap-sm:         0.85rem;
  --gap:            1.5rem;
  --gap-lg:         2.5rem;
  --gap-xl:         4rem;
  --gap-xxl:        7rem;

  /* ── Radius (used sparingly — most surfaces are square) ──────────── */
  --radius-sm:      2px;
  --radius:         3px;
  --radius-pill:    999px;

  /* ── Border weights ──────────────────────────────────────────────── */
  --hairline:       1px;
  --rule:           1.5px;
  --emphasis:       2px;

  /* ── Shadow (used very sparingly) ────────────────────────────────── */
  --shadow-soft:    0 8px 28px -16px rgba(42, 36, 56, 0.18);
  --shadow-medium:  0 12px 32px -16px rgba(42, 36, 56, 0.22);

  /* ── Easing (the four standard curves) ───────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);     /* smooth landing */
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);     /* quick exit */
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);    /* breathing */
  --ease-draw:      cubic-bezier(0.65, 0, 0.35, 1);    /* decisive */

  /* ── Duration (the four standard speeds) ─────────────────────────── */
  --speed-quick:    160ms;
  --speed-standard: 240ms;
  --speed-smooth:   320ms;
  --speed-slow:     2400ms;

  /* ── Z-index scale ────────────────────────────────────────────────── */
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-overlay:      900;
  --z-modal:        1000;
  --z-drawer:       1500;
  --z-toast:        2000;
  --z-context:      3000;
  --z-cmdk:         4000;
}