/* ────────────────────────────────────────────────────────────
   Espresso Noir — design tokens
   Dark roasted ground, oat cream type, molten copper heat.
   ──────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* ── Ground: warm near-black, roasted ── */
  --ink-1000: #070605;
  --ink-900: #0d0b09;
  --ink-850: #14110e;
  --ink-800: #1b1713;
  --ink-750: #221c17;
  --ink-700: #2b231c;
  --ink-600: #3a2f24;
  --ink-500: #4d3f31;

  /* ── Type: oat cream ── */
  --cream-50: #fbf9f4;
  --cream-100: #f4f0e6;
  --cream-200: #e5dece;
  --cream-300: #d0c6b4;
  --cream-400: #ab9f8c;
  --cream-500: #8c7f6d;

  /* ── Heat: molten copper ── */
  --copper-200: #f6d9b4;
  --copper-300: #eec095;
  --copper-400: #e0a66a;
  --copper-500: #c98a45;
  --copper-600: #a66c31;
  --copper-700: #7d4f23;
  --copper-900: #3a2410;
  --copper-950: #2a1a0c;

  /* ── Signal: eucalyptus — included, verified, saved ── */
  --sage-300: #abc0ac;
  --sage-400: #8aa38b;
  --sage-600: #5b6b4f;
  --sage-900: #222b1f;

  /* ── Semantic roles ── */
  --bg: var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-panel: var(--ink-800);
  --bg-inset: var(--ink-1000);
  --fg: var(--cream-100);
  --fg-muted: var(--cream-300);
  --fg-dim: var(--cream-400);
  --accent: var(--copper-400);
  --accent-strong: var(--copper-500);
  --accent-quiet: var(--copper-700);
  --positive: var(--sage-400);

  --line: color-mix(in oklab, var(--cream-100) 11%, transparent);
  --line-strong: color-mix(in oklab, var(--cream-100) 20%, transparent);
  --line-copper: color-mix(in oklab, var(--copper-400) 38%, transparent);

  /* ── Type scale (fluid) ── */
  --step--2: clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.17rem, 1.1rem + 0.34vw, 1.4rem);
  --step-2: clamp(1.42rem, 1.29rem + 0.6vw, 1.85rem);
  --step-3: clamp(1.72rem, 1.48rem + 1.1vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.68rem + 1.9vw, 3.4rem);
  --step-5: clamp(2.25rem, 1.7rem + 2.5vw, 3.7rem);
  --step-6: clamp(2.7rem, 1.55rem + 4.4vw, 4.6rem);

  /* ── Space ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  --measure: 66ch;

  /* ── Radii ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ── Elevation: every shadow carries offset + blur ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px -4px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, 0.8), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 14px 34px -14px rgba(0, 0, 0, 0.85), 0 44px 90px -50px rgba(0, 0, 0, 1);
  --shadow-copper: 0 10px 30px -14px rgba(201, 138, 69, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.7);

  /* ── Motion ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
  --dur-5: 1100ms;

  --nav-h: 4.25rem;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}