/* ==========================================================================
   Neurix Systems — Colors & Type
   ========================================================================== */

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

:root {
  /* ---------- Brand palette ---------- */
  --neurix-ink:          #0B1220;   /* deep navy — primary surface on dark */
  --neurix-ink-2:        #111A2E;   /* raised surface on dark */
  --neurix-ink-3:        #1A2540;   /* elevated card on dark */

  --neurix-indigo-900:   #1E3A8A;   /* deep secondary */
  --neurix-blue-700:     #1D4ED8;
  --neurix-blue-600:     #2563EB;   /* primary brand blue */
  --neurix-blue-500:     #3B82F6;
  --neurix-cyan-400:     #38BDF8;   /* signature accent */
  --neurix-cyan-300:     #7DD3FC;   /* highlight / glow */
  --neurix-cyan-100:     #E0F2FE;

  /* ---------- Neutrals ---------- */
  --slate-950: #0B1220;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* ---------- Semantic ---------- */
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --info:    #38BDF8;

  /* ---------- Foreground / background (light) ---------- */
  --bg:        var(--slate-50);
  --bg-raised: var(--white);
  --bg-sunken: var(--slate-100);
  --fg1:       var(--slate-900);
  --fg2:       var(--slate-600);
  --fg3:       var(--slate-500);
  --fg-muted:  var(--slate-400);
  --fg-on-brand: var(--white);
  --border:    var(--slate-200);
  --border-strong: var(--slate-300);

  /* ---------- Brand roles ---------- */
  --brand:        var(--neurix-blue-600);
  --brand-hover:  var(--neurix-blue-700);
  --brand-press:  var(--neurix-indigo-900);
  --accent:       var(--neurix-cyan-400);
  --accent-soft:  var(--neurix-cyan-100);

  /* ---------- Type ---------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 64px;  --lh-display: 1.05;  --ls-display: -0.02em;
  --fs-h1: 48px;       --lh-h1: 1.1;        --ls-h1: -0.02em;
  --fs-h2: 36px;       --lh-h2: 1.15;       --ls-h2: -0.015em;
  --fs-h3: 28px;       --lh-h3: 1.2;        --ls-h3: -0.01em;
  --fs-h4: 22px;       --lh-h4: 1.3;        --ls-h4: -0.005em;
  --fs-body: 16px;     --lh-body: 1.6;
  --fs-small: 14px;    --lh-small: 1.5;
  --fs-caption: 12px;  --lh-caption: 1.45;
  --fs-overline: 12px; --ls-overline: 0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(11,18,32,0.06);
  --shadow-sm: 0 2px 4px rgba(11,18,32,0.06), 0 1px 2px rgba(11,18,32,0.04);
  --shadow-md: 0 6px 14px rgba(11,18,32,0.08), 0 2px 4px rgba(11,18,32,0.04);
  --shadow-lg: 0 18px 38px rgba(11,18,32,0.12), 0 4px 10px rgba(11,18,32,0.05);
  --shadow-glow: 0 0 0 1px rgba(56,189,248,0.35), 0 10px 30px rgba(37,99,235,0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* Dark mode tokens (applied when data-theme="dark") */
[data-theme="dark"] {
  --bg:        var(--neurix-ink);
  --bg-raised: var(--neurix-ink-2);
  --bg-sunken: #070C17;
  --fg1:       var(--slate-50);
  --fg2:       var(--slate-300);
  --fg3:       var(--slate-400);
  --fg-muted:  var(--slate-500);
  --border:    #1C2742;
  --border-strong: #273253;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.55);
}

/* ---------- Base semantic elements ---------- */
html, body { background: var(--bg); color: var(--fg1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }

.h-display, h1.display {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg3); }
.overline { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); font-weight: 600; color: var(--accent); }
code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); padding: 2px 6px; border-radius: var(--r-xs); color: var(--fg1); }