/* ═══════════════════════════════════════════════════════════════════════
   AXIOM — design tokens
   ───────────────────────────────────────────────────────────────────────
   THE canonical stylesheet. Every AXIOM surface links this as
   `/assets/axiom-tokens.css`:
     · served from    web/design-tokens/axiom-tokens.css
     · installed to   $PREFIX/share/assets/axiom-tokens.css  (bridge/user-os/install.sh)
     · deployed to    web/assets/axiom-tokens.css            (platform/deploy/axiom-deploy.sh)

   Contract
   ────────
   1. PRIMITIVES (`--ax-*`) are raw, theme-invariant values. Surfaces do not
      use these directly — they exist only so the semantics below have one
      definition to point at.
   2. SEMANTICS (`--bg-*`, `--fg-*`, `--line-*`, `--accent*`, `--amber*`,
      `--danger*`, `--success*`, `--overlay`, `--shadow-*`, `--scanline-*`,
      shape, motion) are the ONLY names a surface should reference. They are
      remapped for light mode below, so a surface written against semantics
      gets both themes for free.
   3. Back-compat aliases — bare `--axiom-*`, short `--x-0`, and hybrid
      `--axiom-x-0` — all resolve to the same semantics. A surface should
      pick one convention; new code should prefer the short semantic names.

   Brand
   ─────
   teal `#7ee0c9` is the solo accent · `◆` (U+25C6) is the only mark ·
   background is deep charcoal, never pure black · radius 2px ·
   JetBrains Mono for wordmark/kicker/tables/code · never Geist.
   See docs/concepts/brand/README.md.

   Themes
   ──────
   Dark is the default and the brand's native surface. Light is an explicit
   opt-in: set <html data-theme="light">. (AXIOM does NOT auto-follow
   prefers-color-scheme — a dark instrument stays dark until asked.)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── primitives — theme-invariant ──────────────────────────────────── */
:root {
  /* charcoal (dark surfaces) */
  --ax-c-950: #07080a;
  --ax-c-900: #0a0c0f;
  --ax-c-850: #0d0f12;
  --ax-c-800: #101317;
  --ax-c-750: #14171b;
  --ax-c-700: #191c22;
  --ax-c-600: #2a2e37;
  --ax-c-500: #333844;

  /* paper (light surfaces) */
  --ax-p-000: #ffffff;
  --ax-p-050: #f5f6f5;
  --ax-p-100: #eef0ef;
  --ax-p-200: #ecefee;
  --ax-p-300: #e4e7e6;
  --ax-p-400: #d2d7d6;
  --ax-p-500: #c3c9c8;

  /* ink (neutral text) */
  --ax-ink-950: #0e1114;
  --ax-ink-800: #262c33;
  --ax-ink-700: #40474f;
  --ax-ink-500: #5f6771;
  --ax-ink-400: #8b929b;

  /* teal — the solo accent */
  --ax-teal-300: #9aead8;
  --ax-teal-400: #7ee0c9;
  --ax-teal-500: #3fae94;
  --ax-teal-600: #2f9e83;
  --ax-teal-700: #3b7d6a;
  --ax-teal-800: #0d8a70;
  --ax-teal-900: #0a6d59;

  /* status */
  --ax-amber-400: #f0c674;
  --ax-amber-500: #c9a24a;
  --ax-amber-700: #8a6300;
  --ax-amber-800: #5d4d24;
  --ax-red-400:   #e06c75;
  --ax-red-500:   #e0a6ab;
  --ax-red-700:   #c23b47;
  --ax-red-800:   #5d2c2f;
  --ax-green-400: #98c379;
  --ax-green-700: #3f8f43;
  --ax-indigo-500:#6366f1;
  --ax-indigo-600:#4f46e5;

  /* type */
  --ax-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ax-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── semantics — DARK (default) ────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg-0:         var(--ax-c-950);   /* page */
  --bg-1:         var(--ax-c-850);   /* inset / code / hover row */
  --bg-2:         var(--ax-c-750);   /* raised */
  --bg-soft:      var(--ax-c-850);
  --bg-card:      var(--ax-c-900);   /* card / panel */
  --bg-hover:     #131619;
  --bg-elevated:  #15181d;           /* menu / popover / drawer */
  --overlay:      rgba(7, 8, 10, 0.66);

  /* text */
  --fg-0:         #e6e8eb;           /* headings, body */
  --fg-1:         #a3a8b0;           /* secondary prose */
  --fg-2:         #6b7280;           /* nav, dim labels */
  --fg-3:         #3d4451;           /* kicker, disabled, placeholder */

  /* lines */
  --line:         var(--ax-c-700);
  --line-2:       var(--ax-c-600);
  --line-3:       var(--ax-c-500);

  /* accent (teal, solo) */
  --accent:       var(--ax-teal-400);
  --accent-hover: var(--ax-teal-300);
  --accent-dim:   var(--ax-teal-700);
  --accent-soft:  rgba(126, 224, 201, 0.12);
  --accent-faint: rgba(126, 224, 201, 0.06);
  --accent-ring:  rgba(126, 224, 201, 0.45);

  /* amber — draft / pending status ONLY, never brand expression */
  --amber:        var(--ax-amber-400);
  --amber-dim:    var(--ax-amber-800);
  --amber-soft:   rgba(240, 198, 116, 0.10);

  /* danger */
  --danger:       var(--ax-red-400);
  --danger-dim:   var(--ax-red-800);
  --danger-soft:  rgba(224, 108, 117, 0.10);

  /* success */
  --success:      var(--ax-green-400);
  --success-soft: rgba(152, 195, 121, 0.10);

  /* indigo — a fourth, rare choice hue (charts/categories only) */
  --indigo:       var(--ax-indigo-500);
  --indigo-soft:  rgba(99, 102, 241, 0.10);

  /* effect */
  --scanline-line: rgba(255, 255, 255, 0.012);
  --scanline-glow: rgba(126, 224, 201, 0.05);
  --glow-mark:     0 0 18px rgba(126, 224, 201, 0.45);
  --glow-text:     0 0  8px rgba(126, 224, 201, 0.35);
  --shadow-1:      0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2:      0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3:      0 18px 48px rgba(0, 0, 0, 0.65);

  /* chart categorical ramp (theme-aware) */
  --chart-1: var(--accent);
  --chart-2: #6b7280;
  --chart-3: var(--amber);
  --chart-4: var(--ax-teal-700);
  --chart-5: #8b7cc8;
  --chart-6: var(--ax-green-400);

  /* shape */
  --radius:      2px;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 130ms;
  --dur:      240ms;

  /* type aliases */
  --sans: var(--ax-sans);
  --mono: var(--ax-mono);
}

/* ── semantics — LIGHT ─────────────────────────────────────────────── */
/* explicit opt-in */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-0:         var(--ax-p-050);
  --bg-1:         var(--ax-p-000);
  --bg-2:         var(--ax-p-200);
  --bg-soft:      var(--ax-p-100);
  --bg-card:      var(--ax-p-000);
  --bg-hover:     var(--ax-p-100);
  --bg-elevated:  var(--ax-p-000);
  --overlay:      rgba(14, 17, 20, 0.35);

  --fg-0:         var(--ax-ink-950);
  --fg-1:         var(--ax-ink-700);
  --fg-2:         var(--ax-ink-500);
  --fg-3:         var(--ax-ink-400);

  --line:         var(--ax-p-300);
  --line-2:       var(--ax-p-400);
  --line-3:       var(--ax-p-500);

  /* teal must darken to stay AA on paper */
  --accent:       var(--ax-teal-800);
  --accent-hover: var(--ax-teal-900);
  --accent-dim:   var(--ax-teal-500);
  --accent-soft:  rgba(13, 138, 112, 0.08);
  --accent-faint: rgba(13, 138, 112, 0.05);
  --accent-ring:  rgba(13, 138, 112, 0.35);

  --amber:        var(--ax-amber-700);
  --amber-dim:    var(--ax-amber-500);
  --amber-soft:   rgba(138, 99, 0, 0.10);

  --danger:       var(--ax-red-700);
  --danger-dim:   var(--ax-red-500);
  --danger-soft:  rgba(194, 59, 71, 0.08);

  --success:      var(--ax-green-700);
  --success-soft: rgba(63, 143, 67, 0.10);

  --indigo:       var(--ax-indigo-600);
  --indigo-soft:  rgba(79, 70, 229, 0.10);

  --scanline-line: rgba(14, 17, 20, 0.020);
  --scanline-glow: rgba(13, 138, 112, 0.040);
  --glow-mark:     0 1px 0 rgba(13, 138, 112, 0.18);
  --glow-text:     0 0 0 rgba(0, 0, 0, 0);
  --shadow-1:      0 1px 2px rgba(16, 20, 24, 0.06);
  --shadow-2:      0 8px 24px rgba(16, 20, 24, 0.10);
  --shadow-3:      0 18px 48px rgba(16, 20, 24, 0.16);

  --chart-1: var(--accent);
  --chart-2: #8b929b;
  --chart-3: var(--amber);
  --chart-4: var(--ax-teal-600);
  --chart-5: #6d5fb0;
  --chart-6: var(--ax-green-700);
}

/* ── back-compat aliases ───────────────────────────────────────────── */
/* Lazily bound to the semantics above, so every alias follows the active
   theme automatically. Three conventions resolve to one source. */
:root {
  /* bare --axiom-* */
  --axiom-bg:           var(--bg-0);
  --axiom-bg-soft:      var(--bg-1);
  --axiom-ink:          var(--fg-0);
  --axiom-ink-dim:      var(--fg-1);
  --axiom-ink-faint:    var(--fg-3);
  --axiom-line:         var(--line);
  --axiom-line-strong:  var(--line-2);
  --axiom-accent:       var(--accent);
  --axiom-accent-dim:   var(--accent-dim);
  --axiom-accent-soft:  var(--accent-soft);
  --axiom-amber:        var(--amber);
  --axiom-amber-soft:   var(--amber-soft);
  --axiom-danger:       var(--danger);
  --axiom-sans:         var(--sans);
  --axiom-mono:         var(--mono);
  --axiom-radius:       var(--radius);
  --axiom-glow-mark:    var(--glow-mark);
  --axiom-glow-text:    var(--glow-text);

  /* short one-offs from earlier revisions */
  --bg:            var(--bg-0);
  --fg:            var(--fg-0);
  --ink:           var(--fg-0);
  --ink-dim:       var(--fg-1);
  --ink-faint:     var(--fg-3);
  --line-strong:   var(--line-2);
  --accent-2:      var(--amber);
  --accent-glow:   var(--glow-text);
  --warn:          var(--danger);
  --font-sans:     var(--sans);
  --font-mono:     var(--mono);
  --r-sm:          var(--radius-sm);
  --r-xs:          var(--radius-xs);
  --glow:          var(--glow-text);
  --glow-sm:       0 0 4px rgba(126, 224, 201, 0.30);

  /* hybrid --axiom-x-0 */
  --axiom-fg:      var(--fg-0);
  --axiom-fg-0:    var(--fg-0);
  --axiom-fg-1:    var(--fg-1);
  --axiom-fg-2:    var(--fg-2);
  --axiom-fg-3:    var(--fg-3);
  --axiom-bg-1:    var(--bg-1);
  --axiom-bg-2:    var(--bg-2);
  --axiom-accent-2: var(--amber);
  --axiom-warn:    var(--danger);
}

/* ── base body ─────────────────────────────────────────────────────── */
body.axiom {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* ── scanlines overlay — the one permitted surface texture ─────────── */
.axiom-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background:
    radial-gradient(ellipse at top, var(--scanline-glow), transparent 60%),
    repeating-linear-gradient(0deg, var(--scanline-line) 0 1px, transparent 1px 3px);
}

/* ── kicker / section head ─────────────────────────────────────────── */
.axiom-kicker, .axiom-section-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── live pulse dot ────────────────────────────────────────────────── */
.axiom-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.axiom-dot.pulse {
  box-shadow: 0 0 0 0 var(--accent-ring);
  animation: axiom-pulse 2s infinite;
}
@keyframes axiom-pulse {
  0%   { box-shadow: 0 0 0 0    var(--accent-ring); }
  70%  { box-shadow: 0 0 0 12px rgba(126, 224, 201, 0); }
  100% { box-shadow: 0 0 0 0    rgba(126, 224, 201, 0); }
}

/* ── mark (diamond glyph ◆) ────────────────────────────────────────── */
.axiom-mark { color: var(--accent); font-size: 14px; display: inline-block; }
.axiom-mark.glow { text-shadow: var(--glow-mark); }

.axiom-wordmark { font-family: var(--mono); font-weight: 700; letter-spacing: 0.16em; color: var(--fg-0); }
.axiom-wordmark .diamond { color: var(--accent); }

/* ── brand lockup (used in topbars) ────────────────────────────────── */
.axiom-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
}
.axiom-brand .axiom-mark { text-shadow: var(--glow-mark); }
.axiom-brand .axiom-name { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-0); }
.axiom-brand .axiom-sep { color: var(--fg-2); font-weight: 400; }
.axiom-brand .axiom-sub { color: var(--fg-2); font-weight: 400; text-transform: lowercase; }

/* ── nav ───────────────────────────────────────────────────────────── */
.axiom-nav {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.axiom-nav a { color: var(--fg-2); text-decoration: none; transition: color var(--dur-fast); }
.axiom-nav a:hover { color: var(--accent); }

/* ── status pill ───────────────────────────────────────────────────── */
.axiom-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.15em;
  padding: 2px 8px;
  border-radius: var(--radius);
  border: 1px solid;
  text-shadow: none;
  box-shadow: none;
  vertical-align: middle;
  white-space: nowrap;
}
.axiom-status.live   { color: var(--accent);  border-color: var(--accent-dim);   background: var(--accent-soft); }
.axiom-status.draft  { color: var(--amber);   border-color: var(--amber-dim);    background: var(--amber-soft); }
.axiom-status.warn   { color: var(--danger);  border-color: var(--danger-dim);   background: var(--danger-soft); }
.axiom-status.future { color: var(--fg-3);    border-color: var(--line-2);       background: transparent; }

/* ── button ────────────────────────────────────────────────────────── */
.axiom-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--fg-0);
  background: transparent;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
  text-decoration: none;
}
.axiom-btn:hover { border-color: var(--accent); color: var(--accent); }
.axiom-btn.primary { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }
.axiom-btn.primary:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--bg-0); }

/* ── accent line (manifesto callout) ───────────────────────────────── */
.axiom-accent-line {
  color: var(--accent);
  font-weight: 600;
  font-size: 18px;
  border-left: 3px solid var(--accent-dim);
  padding-left: 20px;
  margin: 28px 0;
}

/* ── cell (live-grid) ──────────────────────────────────────────────── */
.axiom-cell {
  background: var(--bg-1);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.axiom-cell .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.axiom-cell .v {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--glow-text);
}

/* ── tabular layers ────────────────────────────────────────────────── */
.axiom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
}
.axiom-table th, .axiom-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.axiom-table th {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-2);
}
.axiom-table tr:hover td { background: var(--bg-1); }
.axiom-table a { color: var(--accent); text-decoration: none; }
.axiom-table a:hover { text-decoration: underline; }

/* ── footer ────────────────────────────────────────────────────────── */
.axiom-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  padding: 22px 32px;
}
.axiom-foot .dim  { color: var(--fg-3); }
.axiom-foot .mark { color: var(--accent); }
.axiom-foot .axiom-accent { color: var(--accent); }