/* ==========================================================================
   BrainEngine · Synapse — Colors & Type
   The Living Lattice · AI-powered Salesforce delivery
   ========================================================================== */

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

:root {
  /* ====================================================================
     PALETTE — raw tokens
     ==================================================================== */

  /* Grid — the void, navigation chrome, surfaces */
  --grid-0:   #000000;
  --grid-50:  #05070d;   /* app canvas, the "outside" */
  --grid-100: #0a0f1c;   /* surface 1 */
  --grid-150: #0d1424;
  --grid-200: #0f1524;   /* surface 2 (cards) */
  --grid-300: #161d31;   /* surface 3 (raised) */
  --grid-400: #1a2236;   /* border-1 */
  --grid-500: #2b3759;   /* border-2 / divider */
  --grid-600: #566284;   /* caption, muted */
  --grid-700: #8a96b4;   /* secondary text */
  --grid-800: #c6cde0;   /* body */
  --grid-900: #eef1f8;   /* headline */

  /* Stream — cyan, the lattice edge + agents */
  --stream-100: #cffcff;
  --stream-200: #8feeff;
  --stream-300: #4fdcff;
  --stream-400: #00c8ff;   /* primary accent */
  --stream-500: #00b0e8;
  --stream-600: #0086b8;
  --stream-700: #005d82;
  --stream-glow: 0 0 0 1px #00c8ff, 0 0 12px rgba(0,200,255,0.55), 0 0 32px rgba(0,200,255,0.22);

  /* Signal — amber, integrations (Salesforce, Slack, GitHub, Azure DevOps) */
  --signal-100: #fff0d6;
  --signal-300: #ffc773;
  --signal-500: #f59e0b;   /* integration diamonds */
  --signal-600: #d87600;
  --signal-glow: 0 0 0 1px #f59e0b, 0 0 12px rgba(245,158,11,0.55);

  /* Phosphor — green, success + terminal/data surfaces */
  --phosphor-300: #7bffa8;
  --phosphor-500: #33ff88;
  --phosphor-600: #14c466;
  --phosphor-glow: 0 0 0 1px #33ff88, 0 0 10px rgba(51,255,136,0.5);

  /* DEFCON — red, destructive + alarm */
  --defcon-300: #ff8a9a;
  --defcon-500: #ff2d55;
  --defcon-600: #c7143a;
  --defcon-glow: 0 0 0 1px #ff2d55, 0 0 10px rgba(255,45,85,0.55);

  /* ====================================================================
     SEMANTIC TOKENS (dark-first)
     ==================================================================== */

  --bg-canvas:     var(--grid-50);
  --bg-surface-1:  var(--grid-100);
  --bg-surface-2:  var(--grid-200);
  --bg-surface-3:  var(--grid-300);
  --bg-overlay:    rgba(5,7,13,0.72);

  --fg-1:          var(--grid-900);
  --fg-2:          var(--grid-800);
  --fg-3:          var(--grid-700);
  --fg-4:          var(--grid-600);
  --fg-on-accent:  #00161d;
  --fg-on-signal:  #1a0e00;
  --fg-on-success: #00220f;   /* text on a solid --success fill */

  --border-1:      var(--grid-400);
  --border-2:      var(--grid-500);
  --divider:       rgba(139,150,180,0.14);

  --accent:        var(--stream-400);
  --accent-hover:  var(--stream-300);
  --accent-muted:  rgba(0,200,255,0.12);

  --signal:        var(--signal-500);
  --signal-muted:  rgba(245,158,11,0.14);

  --success:       var(--phosphor-500);
  --success-muted: rgba(51,255,136,0.12);

  --danger:        var(--defcon-500);
  --danger-muted:  rgba(255,45,85,0.12);

  /* Surfaces / accents that used to be hard-coded raw tokens — routed
     through semantics so the light theme can re-point them. */
  --bg-inset:      var(--grid-50);              /* recessed "stages" behind demos */
  --scrim-chip-bg: rgba(5,7,13,0.85);           /* floating chips over a scrim */
  --code-fg:       var(--phosphor-500);         /* inline code + <pre> */
  --lattice-line:  rgba(0,200,255,0.045);       /* dot-grid / mesh hairlines */

  /* ====================================================================
     TYPOGRAPHY
     ==================================================================== */
  --font-display:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-terminal: 'VT323', 'JetBrains Mono', monospace;

  /* Scale */
  --fs-display: 72px;
  --lh-display: 1.02; /* @kind font */
  --ls-display: -0.03em; /* @kind font */
  --fs-h1:      48px;
  --lh-h1:      1.08; /* @kind font */
  --ls-h1:      -0.02em; /* @kind font */
  --fs-h2:      32px;
  --lh-h2:      1.14; /* @kind font */
  --ls-h2:      -0.015em; /* @kind font */
  --fs-h3:      24px;
  --lh-h3:      1.2; /* @kind font */
  --ls-h3:      -0.01em; /* @kind font */
  --fs-h4:      18px;
  --lh-h4:      1.3; /* @kind font */
  --ls-h4:      0; /* @kind font */
  --fs-body:    15px;
  --lh-body:    1.55; /* @kind font */
  --ls-body:    0; /* @kind font */
  --fs-small:   13px;
  --lh-small:   1.5; /* @kind font */
  --ls-small:   0; /* @kind font */
  --fs-caption: 12px;
  --lh-caption: 1.4; /* @kind font */
  --ls-caption: 0.02em; /* @kind font */
  --fs-mono:    13px;
  --lh-mono:    1.5; /* @kind font */
  --ls-mono:    0; /* @kind font */
  --fs-eyebrow: 11px;
  --lh-eyebrow: 1.2; /* @kind font */
  --ls-eyebrow: 0.18em; /* @kind font */

  /* Wordmark treatment (hairline, wide-tracked) */
  --wm-letter-spacing: 0.28em;

  /* ====================================================================
     SPACING · 4px base
     ==================================================================== */
  --sp-0:0; /* @kind spacing */
  --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-0:0; /* @kind radius */
  --r-1:2px; --r-2:4px; --r-3:6px; --r-4:8px; --r-5:10px; --r-pill:999px;

  /* Elevation */
  --elev-1: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02);
  --elev-2: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  --elev-3: 0 12px 40px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
  --glow-accent:   var(--stream-glow);
  --glow-signal:   var(--signal-glow);
  --glow-phosphor: var(--phosphor-glow);
  --glow-danger:   var(--defcon-glow);

  /* Motion */
  --dur-1: 80ms; /* @kind other */
  --dur-2: 140ms; /* @kind other */
  --dur-3: 220ms; /* @kind other */
  --dur-4: 360ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2,0,0,1); /* @kind other */
  --ease-enter:    cubic-bezier(0,0,0.2,1); /* @kind other */
  --ease-exit:     cubic-bezier(0.4,0,1,1); /* @kind other */

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: 24px;
}

/* ==========================================================================
   LIGHT THEME — full semantic override.
   Set data-theme="light" on <html>. Everything below re-points the SAME
   semantic tokens the dark theme uses, so any surface built on tokens flips
   cleanly. Raw --grid-/--stream- palette tokens are intentionally NOT
   touched (a "--grid-50" swatch should still read #05070d in either theme);
   only the semantic layer moves.
   ========================================================================== */
[data-theme="light"] {
  /* Surfaces — cool, near-white, low chroma */
  --bg-canvas:     #f3f6fb;
  --bg-surface-1:  #ffffff;
  --bg-surface-2:  #eef1f7;
  --bg-surface-3:  #e2e7f0;
  --bg-overlay:    rgba(16,22,38,0.40);
  --bg-inset:      #e9edf5;
  --scrim-chip-bg: rgba(255,255,255,0.92);

  /* Text — dark-on-light, four steps of recession */
  --fg-1:          #0a0f1c;
  --fg-2:          #222c44;
  --fg-3:          #4d5a78;
  --fg-4:          #737f9c;
  --fg-on-accent:  #ffffff;
  --fg-on-signal:  #ffffff;
  --fg-on-success: #ffffff;   /* light --success is dark green → white text reads */

  /* Lines */
  --border-1:      #dce1ec;
  --border-2:      #c5cdda;
  --divider:       rgba(26,34,54,0.10);

  /* Accent — deepen the cyan so it carries on white */
  --accent:        #0086b8;
  --accent-hover:  #006d96;
  --accent-muted:  rgba(0,134,184,0.10);

  /* Signal — deepen amber for legibility on light */
  --signal:        #b86a00;
  --signal-muted:  rgba(184,106,0,0.12);

  /* Success — deepen phosphor green */
  --success:       #108a4e;
  --success-muted: rgba(16,138,78,0.12);

  /* Danger */
  --danger:        #e11d48;
  --danger-muted:  rgba(225,29,72,0.10);

  /* Code / lattice tuned for a light canvas */
  --code-fg:       #0a7d52;
  --lattice-line:  rgba(0,134,184,0.07);

  /* Glows become a tight ring + soft cast instead of neon-on-white */
  --glow-accent:   0 0 0 1px rgba(0,134,184,0.55), 0 2px 10px rgba(0,134,184,0.20);
  --glow-signal:   0 0 0 1px rgba(184,106,0,0.50), 0 2px 10px rgba(184,106,0,0.18);
  --glow-phosphor: 0 0 0 1px rgba(16,138,78,0.50), 0 2px 10px rgba(16,138,78,0.18);
  --glow-danger:   0 0 0 1px rgba(225,29,72,0.50), 0 2px 10px rgba(225,29,72,0.18);

  /* Elevation — soft neutral shadows, no inset highlight */
  --elev-1: 0 1px 2px rgba(16,24,40,0.06);
  --elev-2: 0 4px 14px rgba(16,24,40,0.10);
  --elev-3: 0 16px 44px rgba(16,24,40,0.16);
}

/* ==========================================================================
   BASE ELEMENT STYLES
   ========================================================================== */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 600; color: var(--fg-1); margin:0; }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 600; color: var(--fg-1); margin:0; }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; color: var(--fg-1); margin:0; }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 600; color: var(--fg-1); margin:0; }
h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: 600; color: var(--fg-1); margin:0; }
p, .body  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin:0; }
.small    { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); }
.caption  { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-4); }

/* Eyebrow — mono, tracked, cyan */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

/* Wordmark — hairline, extra-wide tracking, matching synapse.brainengine.ai */
.wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--wm-letter-spacing);
  color: var(--fg-1);
  text-transform: uppercase;
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  color: var(--code-fg);
}

.terminal {
  font-family: var(--font-terminal);
  color: var(--phosphor-500);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   LATTICE PRIMITIVES — the dot-grid backdrop + glow halos
   ========================================================================== */
.lattice-bg {
  position: relative;
  background: var(--bg-canvas);
}
.lattice-bg::before {
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--lattice-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lattice-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 90%);
  pointer-events:none;
}