/* ───────────────────────────────────────────────────────────
   DESIGN TOKENS — "The Blueprint"
   A system-diagram / architectural-drafting visual language.
   Dark = default working canvas. Light = printed drawing / paper.
   ─────────────────────────────────────────────────────────── */

:root {
  /* ── surfaces (dark, default) ── */
  --bg: #0b0d10;
  --bg-raised: #12151a;
  --bg-panel: #151920;
  --bg-panel-2: #1a1f27;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* ── ink (text) ── */
  --ink: #e7ebf0;
  --ink-soft: #aab2bf;
  --ink-faint: #6b7280;

  /* ── signal colors ── */
  --blue: #6f9ce8;       /* blueprint linework / structure */
  --blue-dim: #3d5a8a;
  --copper: #c8763c;     /* single warm accent — CTAs, "live" state */
  --copper-soft: rgba(200, 118, 60, 0.16);
  --ok: #5fae82;         /* status-available green, used sparingly */

  /* ── typography ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ── spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── radius (small — this is drafted, not bubbly) ── */
  --radius: 6px;
  --radius-sm: 3px;

  /* ── motion ── */
  --ease-mech: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.35s;
  --dur-slow: 0.6s;
}

/* ── light theme: architectural drawing on warm paper ── */
:root[data-theme='light'] {
  --bg: #f6f4ef;
  --bg-raised: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-2: #f0eee7;
  --line: rgba(20, 20, 25, 0.12);
  --line-strong: rgba(20, 20, 25, 0.22);

  --ink: #191c20;
  --ink-soft: #52565f;
  --ink-faint: #85899a;

  --blue: #2f5db3;
  --blue-dim: #a9bfe0;
  --copper: #a85a26;
  --copper-soft: rgba(168, 90, 38, 0.12);
  --ok: #2f7a52;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f6f4ef;
    --bg-raised: #ffffff;
    --bg-panel: #ffffff;
    --bg-panel-2: #f0eee7;
    --line: rgba(20, 20, 25, 0.12);
    --line-strong: rgba(20, 20, 25, 0.22);

    --ink: #191c20;
    --ink-soft: #52565f;
    --ink-faint: #858a99;

    --blue: #2f5db3;
    --blue-dim: #a9bfe0;
    --copper: #a85a26;
    --copper-soft: rgba(168, 90, 38, 0.12);
    --ok: #2f7a52;
  }
}