/* ============================================================================
   Nucleus Framework — shared design tokens + chrome.
   SINGLE SOURCE OF TRUTH for the site palette and the shared page furniture
   (nav, CTA buttons, badges, footer base, hero backdrop, brand gradients).

   Every page links this file. Colours live here as CSS custom properties so a
   value is defined ONCE; pages reference var(--token) and never repeat a hex.

   Theme model (same as docs.html, which this file absorbed):
     • DARK is the default (bare :root).
     • docs.html has a light/dark toggle — explicit choice stamps
       :root[data-theme="light"|"dark"]; with no choice the OS preference wins
       via the prefers-color-scheme block.
     • The marketing pages (index / stack / demo / 404) are dark-only and pin
       <html data-theme="dark"> so the light paths never apply to them.
   ========================================================================= */

:root {
  /* ── Surfaces / grounds ─────────────────────────────────────────── */
  --bg:            #0f172a;
  --surface:       #16203a;
  --surface-2:     #0a0e1a;   /* deepest ground: terminals, code, panels     */
  --surface-bar:   #161b29;   /* window title bars (term / code / panel)     */
  --footer-bg:     #0a0f1c;   /* marketing footer ground                     */
  --hero-glow:     #1e3a5f;   /* radial hero backdrop highlight              */
  --sidebar-bg:    #0d1526;

  /* ── Text ───────────────────────────────────────────────────────── */
  --text:          #cbd5e1;
  --text-bright:   #e2e8f0;   /* marketing body copy                         */
  --text-soft:     #94a3b8;
  --heading:       #f1f5f9;
  --muted:         #94a3b8;
  --muted-2:       #64748b;
  --muted-3:       #475569;   /* footer text, dim log lines, zone labels     */

  /* ── Lines ──────────────────────────────────────────────────────── */
  --border:        #1e293b;
  --border-soft:   #334155;

  /* ── Accents ────────────────────────────────────────────────────── */
  --link:          #60a5fa;
  --accent:        #60a5fa;
  --accent-2:      #a78bfa;
  --accent-soft:   #93c5fd;   /* code text, eyebrows, benefit lines          */
  --accent-strong: #3b82f6;
  --indigo:        #6366f1;
  --on-accent:     #fff;      /* text on a filled accent/gradient            */

  /* ── Status ─────────────────────────────────────────────────────── */
  --ok:            #22c55e;
  --warn:          #f59e0b;
  --err:           #ef4444;

  /* ── Code / pre (docs.html) ─────────────────────────────────────── */
  --code-bg:       rgba(96,165,250,0.10);
  --code-text:     #93c5fd;
  --code-border:   #1e293b;
  --pre-bg:        #0a0e1a;
  --pre-text:      #cbd5e1;
  --pre-border:    #1e293b;

  /* ── Tables (docs.html) ─────────────────────────────────────────── */
  --table-bg:        #131c31;
  --table-head-bg:   #1e293b;
  --table-head-text: #cbd5e1;
  --row-border:      #1e293b;
  --row-hover:       rgba(96,165,250,0.06);

  /* ── Chrome bits ────────────────────────────────────────────────── */
  --topbar-bg:     rgba(15,23,42,0.85);
  --overlay:       rgba(2,6,15,0.6);
  --shadow:        rgba(0,0,0,0.45);
  --nav-hover-bg:  rgba(96,165,250,0.08);
  --nav-hover-text:#f1f5f9;
  --logo-filter:   invert(1);

  /* ── Accent washes (reused translucencies) ─────────────────────── */
  --accent-wash:    rgba(96,165,250,0.08);
  --accent-wash-10: rgba(96,165,250,0.10);
  --accent-line:    rgba(96,165,250,0.25);  /* eyebrow / hairline borders   */

  /* ── Translucent card grounds (feature / matrix / module cards) ── */
  --panel:   rgba(30,41,59,0.5);
  --panel-2: rgba(30,41,59,0.4);

  /* ── Gradients ──────────────────────────────────────────────────── */
  --gradient-accent:  linear-gradient(135deg, #60a5fa, #a78bfa);  /* brand text */
  --gradient-cta-btn: linear-gradient(135deg, #3b82f6, #6366f1);  /* buttons    */
  --gradient-cta-band:linear-gradient(135deg, rgba(59,130,246,0.18), rgba(124,58,237,0.18));
  --hero-radial:      radial-gradient(ellipse at top, var(--hero-glow) 0%, var(--bg) 70%);

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-cta:    0 8px 24px rgba(59,130,246,0.35);
}

/* Light tokens — explicit toggle, and reused by the OS-preference block.
   (Marketing pages pin data-theme="dark" and never see these.) */
:root[data-theme="light"] {
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --sidebar-bg: #ffffff;
  --text: #334155;
  --text-bright: #1e293b;
  --text-soft: #475569;
  --heading: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --link: #3b82f6;
  --accent: #3b82f6;
  --accent-2: #7c3aed;
  --border: #e2e8f0;
  --border-soft: #cbd5e1;
  --code-bg: #f1f5f9;
  --code-text: #1e40af;
  --code-border: #e2e8f0;
  --pre-bg: #f8fafc;
  --pre-text: #1e293b;
  --pre-border: #e2e8f0;
  --table-bg: #ffffff;
  --table-head-bg: #f8fafc;
  --table-head-text: #475569;
  --row-border: #f1f5f9;
  --row-hover: rgba(59,130,246,0.03);
  --topbar-bg: rgba(255,255,255,0.85);
  --overlay: rgba(15,23,42,0.4);
  --shadow: rgba(15,23,42,0.06);
  --nav-hover-bg: rgba(59,130,246,0.06);
  --nav-hover-text: #1e40af;
  --gradient-accent: linear-gradient(135deg, #2563eb, #7c3aed);
  --logo-filter: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fafbfc; --surface: #ffffff; --surface-2: #f8fafc; --sidebar-bg: #ffffff;
    --text: #334155; --text-bright: #1e293b; --text-soft: #475569; --heading: #0f172a;
    --muted: #64748b; --muted-2: #94a3b8;
    --link: #3b82f6; --accent: #3b82f6; --accent-2: #7c3aed;
    --border: #e2e8f0; --border-soft: #cbd5e1;
    --code-bg: #f1f5f9; --code-text: #1e40af; --code-border: #e2e8f0;
    --pre-bg: #f8fafc; --pre-text: #1e293b; --pre-border: #e2e8f0;
    --table-bg: #ffffff; --table-head-bg: #f8fafc; --table-head-text: #475569;
    --row-border: #f1f5f9; --row-hover: rgba(59,130,246,0.03);
    --topbar-bg: rgba(255,255,255,0.85); --overlay: rgba(15,23,42,0.4); --shadow: rgba(15,23,42,0.06);
    --nav-hover-bg: rgba(59,130,246,0.06); --nav-hover-text: #1e40af;
    --gradient-accent: linear-gradient(135deg, #2563eb, #7c3aed);
    --logo-filter: none;
  }
}

/* ── Base ──────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; }

/* ============================================================================
   Shared marketing chrome — used verbatim by index / stack / 404.
   (Pages keep only their page-specific component CSS.)
   ========================================================================= */

/* ── Sticky top nav ───────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 100; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(51,65,85,0.5); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; }
.nav-brand img { width: 28px; height: 28px; filter: var(--logo-filter); }
.nav-links { display: flex; gap: 6px; flex: 1; }
.nav-links a { padding: 6px 12px; font-size: 14px; color: var(--muted); border-radius: 6px; text-decoration: none; transition: color 0.15s, background 0.15s; }
.nav-links a:hover { color: var(--heading); background: var(--nav-hover-bg); }
.nav-cta { padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 6px; background: var(--gradient-cta-btn); color: var(--on-accent) !important; text-decoration: none; }
@media (max-width: 768px) { .nav-links { display: none; } }

/* ── CTA buttons ──────────────────────────────────────────────────── */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--gradient-cta-btn); color: var(--on-accent); font-size: 15px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; border: none; cursor: pointer; font-family: inherit; }
.cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta); }
.cta-secondary { background: transparent; border: 1px solid var(--border-soft); color: var(--text); }
.cta-secondary:hover { border-color: var(--accent); background: var(--accent-wash); }

/* ── Footer base ──────────────────────────────────────────────────── */
.footer { text-align: center; padding: 48px 24px 32px; color: var(--muted-3); font-size: 13px; background: var(--footer-bg); }
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }