/* =========================================================================
   BrightSpot ZA — Foundational tokens (v2 — logo-aligned)
   Brand: electric-blue dot + navy→violet wordmark, modern media-tech.
   Dark-first. Light variant lives at bottom.
   ========================================================================= */

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

:root {
  /* ---------- Color: neutrals (cool-tinted near-black, slight blue cast) ---------- */
  --bs-bg:           #07080D;   /* page background */
  --bs-surface-1:    #10131C;   /* card / panel */
  --bs-surface-2:    #181C28;   /* nested card / hover */
  --bs-surface-3:    #232838;   /* elevated / popover */
  --bs-line:         rgba(255, 255, 255, 0.08);
  --bs-line-strong:  rgba(255, 255, 255, 0.16);

  --bs-fg-1:         #F5F2EA;   /* primary text — warm parchment, not pure white */
  --bs-fg-2:         rgba(245, 242, 234, 0.72);
  --bs-fg-3:         rgba(245, 242, 234, 0.48);
  --bs-fg-4:         rgba(245, 242, 234, 0.28);

  /* ---------- Color: brand (logo-derived) ---------- */
  --bs-blue:         #2563eb;   /* logo dot — primary brand */
  --bs-blue-hi:      #5B8DFF;   /* on-dark highlight / hover */
  --bs-blue-press:   #1e40af;   /* press / navy stop */
  --bs-blue-soft:    rgba(37, 99, 235, 0.16);

  --bs-violet:       #7c3aed;   /* gradient terminal */
  --bs-violet-hi:    #A475FF;
  --bs-violet-soft:  rgba(124, 58, 237, 0.16);

  --bs-navy:         #1e40af;   /* deep brand stop */

  /* The signature gradient — used on hero word-mark, primary CTAs, brand seams */
  --bs-grad:         linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #7c3aed 100%);
  --bs-grad-soft:    linear-gradient(135deg, rgba(37,99,235,0.18) 0%, rgba(124,58,237,0.18) 100%);

  /* ---------- Color: secondary accents (data / state, never decoration) ---------- */
  --bs-beam:         #FFB627;   /* amber — "active LED pixel", peak-hour data, status */
  --bs-beam-soft:    rgba(255, 182, 39, 0.14);
  --bs-signal:       #3DD9D6;   /* cyan — telemetry / live data only */
  --bs-signal-soft:  rgba(61, 217, 214, 0.14);

  /* Back-compat aliases for older partials */
  --bs-primary:      var(--bs-blue);
  --bs-primary-hi:   var(--bs-blue-hi);

  /* ---------- Color: status ---------- */
  --bs-ok:           #4ADE80;
  --bs-warn:         #F59E0B;
  --bs-err:          #F87171;
  --bs-info:         var(--bs-blue-hi);

  --bs-ok-soft:      rgba(74, 222, 128, 0.14);
  --bs-warn-soft:    rgba(245, 158, 11, 0.14);
  --bs-err-soft:     rgba(248, 113, 113, 0.14);

  /* ---------- Type: families ---------- */
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type: scale ---------- */
  --fs-eyebrow:   12px;
  --fs-caption:   13px;
  --fs-body-sm:   14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h6:        20px;
  --fs-h5:        24px;
  --fs-h4:        32px;
  --fs-h3:        40px;
  --fs-h2:        56px;
  --fs-h1:        72px;
  --fs-display:   96px;

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

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  --ls-eyebrow:   0.18em;
  --ls-tight:     -0.02em;
  --ls-display:   -0.035em;

  /* ---------- Spacing (8-pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;

  /* ---------- Radii ---------- */
  --r-sm:    8px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-pill:  999px;

  /* ---------- Borders ---------- */
  --b-hair:        1px solid var(--bs-line);
  --b-hair-strong: 1px solid var(--bs-line-strong);

  /* ---------- Elevation ---------- */
  --e1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.30);
  --e2: 0 8px 24px rgba(0,0,0,0.45);
  --e3: 0 24px 64px rgba(0,0,0,0.60);
  --glow-blue:    0 0 24px rgba(37, 99, 235, 0.45);
  --glow-violet:  0 0 24px rgba(124, 58, 237, 0.45);
  --glow-beam:    0 0 24px rgba(255, 182, 39, 0.35);
  --glow-signal:  0 0 24px rgba(61, 217, 214, 0.35);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   150ms;
  --dur:        220ms;
  --dur-slow:   400ms;
  --dur-entry:  600ms;

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --prose-max:   68ch;

  --pixel-grid: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  --pixel-grid-size: 16px 16px;
}

/* =========================================================================
   Semantic element styles.
   ========================================================================= */

.bs, .bs * { box-sizing: border-box; }

.bs body, .bs.body, .bs-body {
  background: var(--bs-bg);
  color: var(--bs-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bs h1, .bs .h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, var(--fs-h1));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--bs-fg-1);
  margin: 0;
}
.bs h2, .bs .h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, var(--fs-h2));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--bs-fg-1);
  margin: 0;
}
.bs h3, .bs .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--bs-fg-1);
  margin: 0;
}
.bs h4, .bs .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--bs-fg-1);
  margin: 0;
}
.bs h5, .bs .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--bs-fg-1);
  margin: 0;
}
.bs h6, .bs .h6 {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--bs-fg-1);
  margin: 0;
}

.bs p, .bs .p {
  margin: 0;
  color: var(--bs-fg-2);
  max-width: var(--prose-max);
}

.bs .lead {
  font-size: var(--fs-body-lg);
  color: var(--bs-fg-1);
  line-height: var(--lh-normal);
}

.bs .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bs-fg-3);
}

.bs .mono, .bs code, .bs kbd, .bs samp, .bs pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.bs .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.bs .grad-text {
  background: var(--bs-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bs a {
  color: var(--bs-fg-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bs a:hover { border-bottom-color: var(--bs-fg-2); }

.bs hr {
  border: 0;
  border-top: 1px solid var(--bs-line);
  margin: var(--sp-6) 0;
}

.bs ::selection { background: var(--bs-blue); color: #fff; }

/* =========================================================================
   Light variant
   ========================================================================= */
.bs[data-theme="light"] {
  --bs-bg:        #FBF8F1;
  --bs-surface-1: #FFFFFF;
  --bs-surface-2: #F3EFE5;
  --bs-surface-3: #E9E4D6;
  --bs-line:        rgba(8, 9, 12, 0.10);
  --bs-line-strong: rgba(8, 9, 12, 0.20);
  --bs-fg-1: #08090C;
  --bs-fg-2: rgba(8, 9, 12, 0.72);
  --bs-fg-3: rgba(8, 9, 12, 0.52);
  --bs-fg-4: rgba(8, 9, 12, 0.32);
  --pixel-grid: radial-gradient(rgba(8,9,12,0.08) 1px, transparent 1px);
}