/* ============================================================================
   NexusEdge Hailo Console — Editorial Design Tokens
   Replaces the AxonML "NexusForge" token system.
   Theme: AutomataNexus editorial — paper cream / graphite / bone
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Editorial core tokens ─────────────────────────────── */
  --bg:          #f4f1ea;
  --bg-elev:     #ffffff;
  --ink:         #0e0f10;
  --ink-soft:    #2a2c2f;
  --ink-mute:    #6b6b6b;
  --ink-dim:     #a4a097;
  --rule:        #1a1b1c;
  --rule-soft:   rgba(14,15,16,0.14);
  --accent:      #14b8a6;
  --accent-2:    #e07a5f;
  --warn:        #d97706;
  --ok:          #10b981;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;

  --gut: clamp(16px, 2vw, 28px);
  --pad: clamp(20px, 3vw, 40px);

  /* ── Backward-compatible aliases (old token → editorial) ── */
  --font-sans:        var(--sans);
  --font-mono:        var(--mono);

  --bg-primary:       var(--bg-elev);
  --bg-secondary:     var(--bg);
  --bg-tertiary:      var(--bg);
  --bg-cream:         var(--bg);
  --bg-highlight:     var(--bg-elev);
  --bg-teal:          var(--bg-elev);
  --bg-slate:         var(--bg);
  --bg-cream-light:   var(--bg);

  --primary:          var(--accent);
  --primary-dark:     #0d9488;
  --primary-light:    rgba(20,184,166,0.15);
  --primary-ultra:    rgba(20,184,166,0.06);
  --primary-rgb:      20, 184, 166;

  --terracotta:       var(--accent-2);
  --terracotta-dark:  #c4653f;
  --terracotta-light: rgba(224,122,95,0.2);
  --terracotta-bold:  var(--accent-2);

  --success:          var(--ok);
  --success-bg:       rgba(16,185,129,0.08);
  --success-alt:      var(--ok);
  --warning:          var(--warn);
  --warning-bg:       rgba(217,119,6,0.08);
  --error:            #ef4444;
  --error-bg:         rgba(239,68,68,0.08);
  --danger:           #ef4444;
  --info:             #3b82f6;
  --info-bg:          rgba(59,130,246,0.08);

  --text-primary:     var(--ink);
  --text-secondary:   var(--ink-soft);
  --text-muted:       var(--ink-mute);
  --text-light:       #f3efe4;
  --text-on-primary:  var(--bg);

  --border:           var(--rule-soft);
  --border-strong:    var(--rule);
  --border-teal:      rgba(20,184,166,0.3);
  --border-cream:     var(--rule-soft);

  --white:            #ffffff;
  --black:            var(--ink);
  --hover-bg:         var(--bg-elev);
  --code-bg:          var(--ink);

  /* ── Typography scale (unchanged) ─────────────────────── */
  --fs-xs:      11px;
  --fs-sm:      12px;
  --fs-base:    14px;
  --fs-md:      15px;
  --fs-lg:      16px;
  --fs-xl:      18px;
  --fs-2xl:     20px;
  --fs-3xl:     24px;
  --fs-4xl:     28px;
  --fs-5xl:     36px;
  --fs-6xl:     48px;
  --fs-7xl:     56px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.7;

  --ls-tight:   -0.01em;
  --ls-normal:   0em;
  --ls-wide:    0.05em;
  --ls-wider:   0.5px;

  /* ── Spacing (unchanged) ──────────────────────────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;

  /* ── Radii — editorial: sharp everywhere ──────────────── */
  --radius-xs:    0;
  --radius-sm:    0;
  --radius-md:    0;
  --radius-lg:    0;
  --radius-xl:    0;
  --radius-2xl:   0;
  --radius-pill:  0;
  --radius-round: 50%;

  /* ── Shadows — editorial: none ────────────────────────── */
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --shadow-card: none;
  --shadow-xl:   none;
  --shadow-2xl:  none;
  --shadow-primary: none;
  --shadow-primary-hover: none;
  --focus-ring:  0 0 0 2px var(--accent);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.2s;
  --dur-slow:   0.25s;
  --dur-slower: 0.3s;

  /* ── Layout ───────────────────────────────────────────── */
  --sidebar-w:      240px;
  --navbar-h:       64px;
  --container-max:  1200px;
  --container-wide: 1480px;
}

/* ── Theme: graphite (dark) ────────────────────────────────── */
[data-theme="graphite"], [data-theme="dark"] {
  --bg:        #0b0c0d;
  --bg-elev:   #131416;
  --ink:       #f3efe4;
  --ink-soft:  #d8d4c9;
  --ink-mute:  #8a8a86;
  --ink-dim:   #555550;
  --rule:      #f3efe4;
  --rule-soft: rgba(243,239,228,0.14);

  --bg-primary:     var(--bg-elev);
  --bg-secondary:   var(--bg);
  --bg-tertiary:    var(--bg);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted:     var(--ink-mute);
  --border:         var(--rule-soft);
  --border-strong:  var(--rule);
  --hover-bg:       var(--bg-elev);
  --code-bg:        #1a1b1c;
}

/* ── Theme: bone ───────────────────────────────────────────── */
[data-theme="bone"] {
  --bg:        #ecebe5;
  --bg-elev:   #f8f6f0;
  --ink:       #111213;
  --ink-soft:  #2a2c2f;
  --rule:      #111213;
  --rule-soft: rgba(17,18,19,0.18);
}

/* ── Film grain ────────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.04;
  mix-blend-mode: multiply;
}
[data-theme="graphite"] body::before,
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.05; }

/* ── Base resets ───────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── Editorial primitives ──────────────────────────────────── */
.mono { font-family: var(--mono); font-feature-settings: "tnum","ss01"; }
.upper { text-transform: uppercase; letter-spacing: 0.08em; }

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
}

.rule { height: 1px; background: var(--rule); width: 100%; }
.rule-soft { height: 1px; background: var(--rule-soft); width: 100%; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  color: var(--ink);
  white-space: nowrap;
}
.tag .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.tag.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.bracket-count::before { content: "[ "; color: var(--ink-mute); }
.bracket-count::after  { content: " ]"; color: var(--ink-mute); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all .18s ease;
  position: relative; overflow: hidden;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn .arrow { font-family: var(--mono); transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Legacy class compat ───────────────────────────────────── */
.gradient-text { color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; }
.h-display { font-size: var(--fs-7xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ink); }
code, .code { font-family: var(--mono); background: var(--bg); padding: 2px 6px; font-size: 0.875em; color: var(--ink); border: 1px solid var(--rule-soft); }
pre.code-block { font-family: var(--mono); background: var(--ink); color: var(--bg); padding: 16px 20px; font-size: 13px; line-height: 1.6; overflow-x: auto; border: 1px solid var(--rule); }