/* ============================================================
   ExperiOps Design System — Tokens
   ============================================================
   Single source of truth for the brand. Drop this into
   `static/css/tokens.css` and import it FIRST, before anything
   else, so cascade order is predictable.

   Aesthetic: Swiss / technical — grid-driven, precise.
   Palette anchor: deep forest green (#0a3d2e).
   Type pairing: Space Grotesk (display) + Inter (body) +
                 JetBrains Mono (technical labels) +
                 Fraunces italic (accent emphasis only)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* ── Brand greens ─────────────────────────────────────── */
  --green-deep:   #0a3d2e;   /* primary — buttons, accents, status */
  --green-mid:    #14543f;   /* hover / secondary */
  --green-bright: #7dd87d;   /* lime — highlights on dark grounds */
  --green-tint:   #e8f3ec;   /* very light wash — panel fills */

  /* ── Neutrals (warm paper) ────────────────────────────── */
  --bg:    #f6f5ef;          /* page ground */
  --paper: #fbfaf4;          /* card surface, slightly lighter */
  --ink:   #0d0f0c;          /* primary text */
  --ink-2: #2a2d27;          /* secondary text */
  --ink-3: #5b5e57;          /* tertiary / mono labels */
  --rule:  #0d0f0c;          /* rule colour — same as ink for max contrast */
  --red:   #c0392b;          /* error states */

  /* ── Typography ───────────────────────────────────────── */
  --f-display: 'Space Grotesk', 'Inter', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --f-accent:  'Fraunces', serif;        /* italic accents only */

  /* Type scale */
  --t-mono-xs: 10px;
  --t-mono-sm: 11px;
  --t-mono:    12px;
  --t-body-sm: 13.5px;
  --t-body:    15px;
  --t-body-lg: 18px;
  --t-h4:      22px;
  --t-h3:      28px;
  --t-h2:      clamp(36px, 5vw, 68px);
  --t-h1:      clamp(56px, 9.5vw, 152px);

  /* ── Spacing ──────────────────────────────────────────── */
  --unit: 1;                 /* multiplied into densities */
  --gutter: 24px;            /* grid gutter */
  --pad-x: calc(40px * var(--unit));
  --max-w: 1440px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 120px;

  /* ── Rules / borders ──────────────────────────────────── */
  --rule-thin:  1px;
  --rule-mid:   2px;          /* DEFAULT — Swiss bold lines */
  --rule-thick: 6px;          /* footer / hero break */

  /* ── Motion ───────────────────────────────────────────── */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 0.15s;
  --dur:      0.3s;

  /* ── Z-index scale ────────────────────────────────────── */
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;
}

/* ── Density modes (toggled by a body[data-density] attr) ── */
body[data-density="compact"] { --unit: 0.75; }
body[data-density="comfy"]   { --unit: 1.25; }

/* ── Dark theme (toggled by html[data-theme="dark"]) ─────── */
html[data-theme="dark"] {
  --bg:    #0a0d0a;
  --paper: #11140f;
  --ink:   #f3f2ec;
  --ink-2: #d4d3cc;
  --ink-3: #8a8d83;
  --rule:  #f3f2ec;
  --green-tint: #0f2418;
}

/* ── Hue variants (toggled by html[data-hue="..."]) ──────── */
html[data-hue="emerald"]  { --green-deep:#066342; --green-mid:#0a8a5c; --green-bright:#5ef0a8; --green-tint:#e0f5ec; }
html[data-hue="olive"]    { --green-deep:#3d4a1a; --green-mid:#5b6e25; --green-bright:#cce670; --green-tint:#eef0dc; }
html[data-hue="electric"] { --green-deep:#0a1f0a; --green-mid:#1a4a1a; --green-bright:#9eff5b; --green-tint:#e8f5d4; }
html[data-hue="emerald"][data-theme="dark"]  { --green-tint:#0d2a1f; }
html[data-hue="olive"][data-theme="dark"]    { --green-tint:#1f240d; }
html[data-hue="electric"][data-theme="dark"] { --green-tint:#0e1a0a; }