/* =========================================================
   KavAI Design System — Core Tokens
   Colors, typography, spacing, radii, shadows, motion
   ========================================================= */

/* Brand wordmark is a geometric grotesk (custom). We use Space Grotesk
   as a close open-source substitute — geometric, slightly technical, with
   similar tall x-height and open apertures. FLAG: confirm w/ brand. */
@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 ===== */
  --kav-indigo:       #2814A0;   /* Primary — from logo sample */
  --kav-indigo-600:   #3823C2;
  --kav-indigo-800:   #1E0E78;
  --kav-indigo-tint:  rgba(40, 20, 160, 0.08);
  --kav-ink:          #0A0B1F;   /* Near-black, slightly indigo */
  --kav-paper:        #FFFFFF;
  --kav-bone:         #F6F4EE;   /* Warm off-white from site */
  --kav-cream:        #FAF8F2;

  /* Accents — curiosity / physical-AI system */
  --kav-signal:       #00A37A;   /* Active / sensing */
  --kav-amber:        #D97706;   /* Attention / in-progress */
  --kav-alert:        #C2221A;   /* Hazard / critical */

  /* Neutrals */
  --kav-gray-900:     #0A0B1F;
  --kav-gray-700:     #2C2D3A;
  --kav-gray-500:     #6A6B78;
  --kav-gray-400:     #9A9BA6;
  --kav-gray-300:     #D5D5DE;
  --kav-gray-200:     #E6E6EC;
  --kav-gray-100:     #F1F0EB;
  --kav-gray-50:      #F9F8F4;

  /* ===== Semantic ===== */
  --fg-1:             var(--kav-ink);
  --fg-2:             rgba(10, 11, 31, 0.68);
  --fg-3:             rgba(10, 11, 31, 0.48);
  --fg-brand:         var(--kav-indigo);
  --fg-on-brand:      var(--kav-paper);

  --bg-canvas:        var(--kav-paper);
  --bg-surface:       var(--kav-bone);
  --bg-inverse:       var(--kav-ink);
  --bg-brand:         var(--kav-indigo);

  --border-subtle:    var(--kav-gray-200);
  --border-strong:    var(--kav-gray-300);
  --border-brand:     var(--kav-indigo);

  /* ===== Focus ring ===== */
  --focus-ring-color:     var(--kav-indigo);
  --focus-ring-width:     2px;
  --focus-ring-offset:    2px;
  --focus-ring-color-on-dark: #8E8FF0;           /* violet for dark surfaces */
  --focus-ring-color-danger:  var(--kav-alert);
  --focus-ring-box-shadow:    0 0 0 3px rgba(40, 20, 160, 0.30);
  --focus-ring-box-shadow-on-dark: 0 0 0 3px rgba(142, 143, 240, 0.40);

  /* ===== Charts & data visualization ===== */
  --chart-1: #2814A0;   /* indigo */
  --chart-2: #8E8FF0;   /* indigo tint */
  --chart-3: #00A37A;   /* signal */
  --chart-4: #D97706;   /* amber */
  --chart-5: #C2221A;   /* alert */
  --chart-6: #4F3DD9;   /* indigo 600 */
  --chart-7: #1E0E78;   /* indigo 800 */
  --chart-8: #6A6B78;   /* gray */
  --chart-grid:       rgba(10, 11, 31, 0.06);
  --chart-axis:       rgba(10, 11, 31, 0.18);
  --chart-label:      var(--fg-3);
  --chart-tooltip-bg: var(--kav-ink);
  --chart-tooltip-fg: #fff;

  /* ===== Status tokens (surface + ring + fg) ===== */
  --status-ok-fg:      var(--kav-signal);
  --status-ok-bg:      rgba(0, 163, 122, 0.12);
  --status-ok-ring:    rgba(0, 163, 122, 0.30);
  --status-warn-fg:    var(--kav-amber);
  --status-warn-bg:    rgba(217, 119, 6, 0.12);
  --status-warn-ring:  rgba(217, 119, 6, 0.30);
  --status-crit-fg:    var(--kav-alert);
  --status-crit-bg:    rgba(194, 34, 26, 0.12);
  --status-crit-ring:  rgba(194, 34, 26, 0.30);
  --status-idle-fg:    var(--kav-gray-500);
  --status-idle-bg:    var(--kav-gray-100);
  --status-idle-ring:  var(--kav-gray-300);
  --status-sensing-fg:   var(--kav-indigo);
  --status-sensing-bg:   rgba(40, 20, 160, 0.10);
  --status-sensing-ring: rgba(40, 20, 160, 0.30);

  /* ===== Map / 3D / geospatial ===== */
  --map-bg-deep:    #0A0B1F;   /* space / near-black */
  --map-bg-mid:     #1A1D3A;   /* ocean / low context */
  --map-bg-high:    #2C2F55;   /* high-context land */
  --map-grid:       rgba(255, 255, 255, 0.04);
  --map-graticule:  rgba(142, 143, 240, 0.14);
  --map-coast:      rgba(255, 255, 255, 0.18);
  --map-label:      rgba(255, 255, 255, 0.55);
  --map-label-muted:rgba(255, 255, 255, 0.28);
  --map-site-ok:    #00E39C;
  --map-site-warn:  var(--kav-amber);
  --map-site-crit:  #FF4A3D;
  --map-site-idle:  #8E8FF0;
  --map-route:      var(--kav-indigo);
  --map-route-active: #8E8FF0;
  --map-heat-0:   rgba(40, 20, 160, 0.00);
  --map-heat-1:   rgba(40, 20, 160, 0.35);
  --map-heat-2:   rgba(79, 61, 217, 0.55);
  --map-heat-3:   rgba(142, 143, 240, 0.70);
  --map-heat-4:   #00E39C;

  /* 3D scene tokens (three.js / r3f) */
  --scene-bg:      var(--map-bg-deep);
  --scene-fog:     rgba(10, 11, 31, 0.9);
  --scene-light-key:  #FFFFFF;
  --scene-light-fill: #8E8FF0;
  --scene-light-rim:  #2814A0;
  --scene-mesh:       #1E0E78;
  --scene-mesh-edge:  rgba(142, 143, 240, 0.6);
  --scene-ground:     #11132A;

  /* ===== Typography ===== */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
  --font-sans:    'Inter', 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Scale — a serious, editorial scale. Display goes big. */
  --type-display-size:    96px;
  --type-display-weight:  500;
  --type-display-lh:      0.96;
  --type-display-tracking:-0.04em;

  --type-hero-size:       64px;
  --type-hero-weight:     500;
  --type-hero-lh:         1.02;
  --type-hero-tracking:   -0.03em;

  --type-h1-size:         44px;
  --type-h1-weight:       500;
  --type-h1-lh:           1.08;
  --type-h1-tracking:     -0.02em;

  --type-h2-size:         32px;
  --type-h2-weight:       500;
  --type-h2-lh:           1.15;
  --type-h2-tracking:     -0.015em;

  --type-h3-size:         22px;
  --type-h3-weight:       500;
  --type-h3-lh:           1.25;
  --type-h3-tracking:     -0.01em;

  --type-lead-size:       20px;
  --type-lead-weight:     400;
  --type-lead-lh:         1.45;
  --type-lead-tracking:   -0.005em;

  --type-body-size:       17px;
  --type-body-weight:     400;
  --type-body-lh:         1.55;
  --type-body-tracking:    0;

  --type-small-size:      14px;
  --type-small-weight:    400;
  --type-small-lh:        1.5;
  --type-small-tracking:   0;

  --type-eyebrow-size:    12px;
  --type-eyebrow-weight:  500;
  --type-eyebrow-lh:      1.3;
  --type-eyebrow-tracking: 0.14em;  /* UPPERCASE EYEBROW */

  --type-mono-size:       13px;
  --type-mono-weight:     400;
  --type-mono-tracking:    0;

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

  /* ===== Radii — restrained, editorial ===== */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;   /* buttons, inputs */
  --radius-lg:    12px;  /* cards */
  --radius-xl:    20px;  /* section panels */
  --radius-full:  9999px;

  /* ===== Shadows — minimal, technical ===== */
  --shadow-sm:   0 1px 2px rgba(10, 11, 31, 0.04), 0 0 0 1px rgba(10, 11, 31, 0.04);
  --shadow-md:   0 2px 6px rgba(10, 11, 31, 0.06), 0 0 0 1px rgba(10, 11, 31, 0.04);
  --shadow-lg:   0 10px 32px rgba(10, 11, 31, 0.08), 0 0 0 1px rgba(10, 11, 31, 0.04);
  --shadow-brand:0 6px 24px rgba(40, 20, 160, 0.22);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(10, 11, 31, 0.06);

  /* ===== Motion ===== */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* ===== Base elements ===== */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); }

h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-tracking); margin: 0 0 var(--space-4); }
h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-tracking); margin: 0 0 var(--space-3); }
h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-tracking); margin: 0 0 var(--space-2); }
p  { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); margin: 0 0 var(--space-4); color: var(--fg-1); }
a  { color: var(--fg-brand); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out); }
a:hover { border-bottom-color: var(--fg-brand); }
code, pre { font-family: var(--font-mono); font-size: var(--type-mono-size); }

/* Utility classes */
.kav-display   { font-family: var(--font-display); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-lh); letter-spacing: var(--type-display-tracking); }
.kav-hero      { font-family: var(--font-display); font-size: var(--type-hero-size);    font-weight: var(--type-hero-weight);    line-height: var(--type-hero-lh);    letter-spacing: var(--type-hero-tracking); }
.kav-lead      { font-size: var(--type-lead-size); line-height: var(--type-lead-lh); letter-spacing: var(--type-lead-tracking); color: var(--fg-2); }
.kav-eyebrow   { font-family: var(--font-mono); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-lh); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--fg-brand); }
.kav-mono      { font-family: var(--font-mono); font-size: var(--type-mono-size); }
.kav-small     { font-size: var(--type-small-size); line-height: var(--type-small-lh); color: var(--fg-2); }

/* Buttons */
.kav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  padding: 12px 20px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kav-btn--primary  { background: var(--kav-indigo); color: #fff; }
.kav-btn--primary:hover  { background: var(--kav-indigo-800); }
.kav-btn--secondary{ background: transparent; color: var(--fg-1); border-color: var(--kav-gray-300); }
.kav-btn--secondary:hover{ background: var(--kav-bone); border-color: var(--kav-ink); }
.kav-btn--ghost    { background: transparent; color: var(--fg-1); }
.kav-btn--ghost:hover    { background: var(--kav-gray-100); }
.kav-btn--inverse  { background: #fff; color: var(--kav-ink); }
.kav-btn--inverse:hover  { background: var(--kav-bone); }

/* Focus ring */
.kav-btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible,
a:focus-visible, summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.kav-focus-ring-soft:focus-visible { outline: 0; box-shadow: var(--focus-ring-box-shadow); }
.kav-on-dark :focus-visible { outline-color: var(--focus-ring-color-on-dark); }

/* =========================================================
   DARK MODE
   Activated by:  <html data-theme="dark">  OR  media query
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"], :root[data-theme="dark"] * { color-scheme: dark; }

:root[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }
:where(:root[data-theme="dark"]) {
  /* Surfaces */
  --kav-paper:       #0A0B1F;
  --kav-bone:        #11132A;
  --kav-cream:       #151735;

  /* Neutrals invert */
  --kav-gray-50:     #11132A;
  --kav-gray-100:    #181A37;
  --kav-gray-200:    #242747;
  --kav-gray-300:    #363A5E;
  --kav-gray-400:    #5C5F82;
  --kav-gray-500:    #8E90AE;
  --kav-gray-700:    #C7C9DC;
  --kav-gray-900:    #F1F1F8;

  /* Brand shifts to tinted indigo for contrast on dark */
  --kav-indigo:      #8E8FF0;
  --kav-indigo-600:  #A9AAF5;
  --kav-indigo-800:  #6A6BD8;
  --kav-indigo-tint: rgba(142, 143, 240, 0.12);

  /* Semantic */
  --fg-1:            #F1F1F8;
  --fg-2:            rgba(241, 241, 248, 0.70);
  --fg-3:            rgba(241, 241, 248, 0.48);
  --fg-brand:        var(--kav-indigo);
  --fg-on-brand:     #0A0B1F;

  --bg-canvas:       #0A0B1F;
  --bg-surface:      #11132A;
  --bg-inverse:      #F6F4EE;
  --bg-brand:        var(--kav-indigo);

  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-brand:    var(--kav-indigo);

  /* Focus on dark */
  --focus-ring-color:      #8E8FF0;
  --focus-ring-box-shadow: 0 0 0 3px rgba(142, 143, 240, 0.40);

  /* Shadows — dark mode shadows are near-invisible; use elevation borders */
  --shadow-sm:  0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-brand: 0 6px 24px rgba(142, 143, 240, 0.35);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Chart palette — nudged brighter for dark bg */
  --chart-1: #8E8FF0;
  --chart-2: #A9AAF5;
  --chart-3: #00E39C;
  --chart-4: #FFB45A;
  --chart-5: #FF7A6B;
  --chart-6: #4F3DD9;
  --chart-7: #2814A0;
  --chart-8: #C7C9DC;
  --chart-grid:  rgba(255, 255, 255, 0.06);
  --chart-axis:  rgba(255, 255, 255, 0.20);
  --chart-tooltip-bg: #F1F1F8;
  --chart-tooltip-fg: #0A0B1F;

  /* Status tokens pop brighter on dark */
  --status-ok-fg:   #00E39C;
  --status-ok-bg:   rgba(0, 227, 156, 0.14);
  --status-warn-fg: #FFB45A;
  --status-warn-bg: rgba(255, 180, 90, 0.14);
  --status-crit-fg: #FF7A6B;
  --status-crit-bg: rgba(255, 122, 107, 0.14);
  --status-sensing-fg: #8E8FF0;
  --status-sensing-bg: rgba(142, 143, 240, 0.14);
}
/* Manual class helper — add .theme-dark to any subtree */
.theme-dark {
  --kav-paper: #0A0B1F; --kav-bone: #11132A;
  --fg-1: #F1F1F8; --fg-2: rgba(241,241,248,0.70); --fg-3: rgba(241,241,248,0.48);
  --bg-canvas: #0A0B1F; --bg-surface: #11132A;
  --border-subtle: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16);
  --fg-brand: #8E8FF0; --kav-indigo: #8E8FF0;
  color-scheme: dark;
  background: var(--bg-canvas); color: var(--fg-1);
}