/* ============================================================
   EventCortex — Neural Ops Console
   Premium multi-tenant SaaS aesthetic
   ============================================================ */

:root {
  /* -------- Brand & signal (shared across themes) -------- */
  --violet:    #8B5CF6;
  --violet-2:  #A78BFA;
  --cyan:      #06B6D4;
  --cyan-2:    #22D3EE;
  --lime:      #BEF264;
  --amber:     #F59E0B;
  --rose:      #F43F5E;
  --emerald:   #10B981;

  /* -------- Dark theme tokens (defaults) -------- */
  --ink-900: #06080F;
  --ink-850: #0A0E1A;
  --ink-800: #0F1424;
  --ink-700: #161C30;
  --ink-600: #1F2740;
  --ink-500: #2A3450;
  --ink-400: #3A4666;
  --ink-300: #5A6789;
  --ink-200: #8A95B2;
  --ink-100: #C5CCDE;
  --paper:   #F4F1EA;

  /* Semantic surfaces — Phase 31 design refresh:
     dark ground moved to deep void (#0B0F19); indigo replaces violet
     as the interactive primary; cool-gray (#F8FAFC) replaces warm beige. */
  --bg-primary:    #0B0F19;
  --bg-secondary:  #161F30;
  --bg-tertiary:   #1D2A40;
  --surface-1:     #161F30;
  --surface-2:     #1D2A40;
  --glass:         #161F30;
  --glass-strong:  #1D2A40;

  --text-main:     #C8D4E8;
  --text-display:  #E2E8F0;
  --text-muted:    #8E99B4;
  --text-subtle:   #5A6480;

  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.17);
  --border-hot:    rgba(129,140,248,0.45);  /* indigo focus ring */

  --hairline:      var(--border);
  --hairline-2:    var(--border-strong);
  --hairline-hot:  var(--border-hot);

  --btn-bg:        rgba(255,255,255,0.07);
  --btn-bg-hover:  rgba(255,255,255,0.12);
  --input-bg:      rgba(0,0,0,0.18);
  --input-bg-focus:rgba(0,0,0,0.30);
  --table-head:    rgba(0,0,0,0.18);
  --row-hover:     rgba(255,255,255,0.04);
  --code-bg:       rgba(0,0,0,0.30);

  /* Sidebar / topbar surfaces */
  --sidebar-bg:    #10172A;
  --topbar-bg:     rgba(11,15,25,0.97);

  /* Interactive primary — indigo family (replaces violet for CTAs/nav-active).
     Violet tokens stay for brand mark, SA scope chip, and decorative accents. */
  --indigo:        #818CF8;
  --indigo-2:      #A5B4FC;

  --shadow-card:   0 20px 48px -18px rgba(0,0,0,0.45);
  --shadow-2:      0 6px 16px -5px rgba(0,0,0,0.28);

  /* Type */
  --f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --f-sans:    "Geist", "Inter Tight", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 64px;
  --radius: 14px;
  --radius-sm: 8px;

  /* Spacing scale — 4px base grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
}

/* -------- Light theme overrides -------- */
[data-theme="light"] {
  /* Phase 28 design refinement — warm off-white field (#F5F4F0) replaces
     the cold slate (#F2F4F8). Cards stay pure white over a soft warm-gray
     ground; secondary surfaces use a warmer #ECEAE5. High-contrast text
     preserved for Chart.js cards, .ec-cgrid, and stat tiles. */
  --ink-900: #FFFFFF;
  --ink-850: #F5F4F0;
  --ink-800: #FFFFFF;
  --ink-700: #ECEAE5;
  --ink-600: #DCD9D2;
  --ink-500: #94A3B8;
  --ink-400: #64748B;
  --ink-300: #64748B;
  --ink-200: #334155;
  --ink-100: #0F172A;
  --paper:   #0F172A;

  --bg-primary:    #F8FAFC;   /* cool gray — was warm beige */
  --bg-secondary:  #FFFFFF;
  --bg-tertiary:   #EEF2F7;

  --surface-1:     linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  --surface-2:     linear-gradient(180deg, #FFFFFF, #FFFFFF);
  --glass:         rgba(255,255,255,0.82);
  --glass-strong:  rgba(255,255,255,0.96);

  --text-main:     #1E293B;
  --text-display:  #0F172A;
  --text-muted:    #475569;
  --text-subtle:   #64748B;

  --border:        rgba(15,23,42,0.08);
  --border-strong: rgba(15,23,42,0.14);
  --border-hot:    rgba(79,70,229,0.32);   /* indigo focus ring */

  --hairline:      var(--border);
  --hairline-2:    var(--border-strong);
  --hairline-hot:  var(--border-hot);

  --btn-bg:        rgba(15,23,42,0.04);
  --btn-bg-hover:  rgba(15,23,42,0.09);
  --input-bg:      #FFFFFF;
  --input-bg-focus:#FFFFFF;
  --table-head:    rgba(15,23,42,0.04);
  --row-hover:     rgba(79,70,229,0.06);
  --code-bg:       #0F172A; /* keep code blocks dark for legibility */

  /* Sidebar / topbar surfaces */
  --sidebar-bg:    #FFFFFF;
  --topbar-bg:     rgba(255,255,255,0.96);

  /* Indigo interactive primary (light mode) */
  --indigo:        #4F46E5;
  --indigo-2:      #6366F1;

  --shadow-card:   0 18px 44px -24px rgba(15,23,42,0.16);
  --shadow-2:      0 6px 18px -6px rgba(15,23,42,0.12);
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--f-sans);
  background: var(--bg-primary);
  color: var(--text-main);
  transition: background .3s, color .3s;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  overflow: hidden;         /* desktop: shell handles all scroll */
  -webkit-font-smoothing: antialiased;
}
/* Mobile: unlock body scroll — sidebar becomes a fixed drawer */
@media (max-width: 768px) { body { overflow: auto; } }