/* ═══════════════════════════════════════════════════════════════════════
   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, but LIGHT IS
   FIRST-CLASS: both ramps are complete and every semantic name below is
   remapped for both. The active theme is chosen by ONE attribute on <html>:

     data-ax-mode="light" | "dark"   ← the canonical selector (hub-driven)
     data-theme="light"  | "dark"    ← historical alias, kept in sync

   AxiomPlatform (`/assets/axiom-platform.js`) owns the choice: inside the hub
   the hub's theme is forwarded down (`axiom-hub-hello` / `axiom-hub-state`);
   standalone the app falls back to its stored preference, then the OS
   (`prefers-color-scheme`), then dark. Pages should NOT branch on
   `prefers-color-scheme` in CSS — write against the semantics and let the
   runtime stamp the attribute.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 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);
  --amber-ring:   rgba(240, 198, 116, 0.40);

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

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

  /* 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);

  /* shell surfaces — the hub's own chrome. These are the ONLY places a
     shell may use a translucent-on-opaque composite: a sheet over content
     needs a scrim that follows the theme, otherwise light mode shows the
     dark sheet (or vice versa). Everything else is a solid semantic token. */
  --scrim:         rgba(7, 8, 10, 0.66);   /* modal / overlay backdrop */
  --scrim-strong:  rgba(7, 8, 10, 0.85);   /* picker / popover backdrop */
  --sheet:         rgba(13, 15, 18, 0.85); /* floating sheet over content */
  --sheet-solid:   var(--bg-elevated);     /* same sheet, no transparency */
  --glass:         rgba(7, 8, 10, 0.55);   /* translucent panel fill */

  /* 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 ─────────────────────────────────────────────── */
/* Canonical selector is `data-ax-mode`; `data-theme` is the historical alias.
   AxiomPlatform stamps both, so either one alone is enough for a surface. */
:root[data-ax-mode="light"],
: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);
  --amber-ring:   rgba(138, 99, 0, 0.30);

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

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

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

  /* No scanlines on paper. A 1px dark line every 3px is CRT texture on
     charcoal, but on a light surface it reads as banding / a rendering
     artefact across every flat area. The accent glow above the fold
     stays; the repeating lines go. */
  --scanline-line: rgba(14, 17, 20, 0);
  --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);

  /* shell surfaces — light-mode peers of the dark composites above. A scrim
     over paper must be light-tinted, or the sheet reads as a dark smudge. */
  --scrim:         rgba(14, 17, 20, 0.35);
  --scrim-strong:  rgba(245, 246, 245, 0.92);  /* opaque bar over paper */
  --sheet:         rgba(255, 255, 255, 0.88);
  --sheet-solid:   var(--bg-elevated);
  --glass:         rgba(255, 255, 255, 0.60);

  --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;
}

/* ── html layer — paints BEFORE first paint, in both themes ────────── */
/* The canvas, native scrollbars, form controls and selection must follow the
   mode, otherwise a light page flashes white-on-black (or vice versa) until
   the first stylesheet-painted element appears. `color-scheme` is set by the
   two blocks above; this layer covers the elements `color-scheme` misses. */
html {
  background: var(--bg-0);
  color: var(--fg-0);
  color-scheme: dark;
}
html[data-ax-mode="light"],
html[data-theme="light"] {
  color-scheme: light;
}
::selection {
  background: var(--accent-soft);
  color: var(--fg-0);
}
:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* ── 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); }