/* ==========================================================================
   Konda Core — Color tokens
   85/10/5 rule: 85% neutral canvas, 10% structural surfaces, 5% neon guide.
   Values are lifted verbatim from konda-frontend (index.html, workspace.html,
   site/docs/design-system.html) — the shipped app is the source of truth.
   ========================================================================== */

:root {
  /* ---- Base palette (raw values, rarely referenced directly) ---- */
  --konda-neon-100: #fbffcf;
  --konda-neon-300: #ecff6b;
  --konda-neon-500: #deff08; /* signature neon — brand mark, 5% guide */
  --konda-neon-600: #d2f000; /* shipped interactive default (buttons/links) */
  --konda-neon-700: #b8d300; /* dim — borders, secondary neon text */
  --konda-neon-900: #576500; /* deep olive — text-on-neon in some contexts */
  --konda-neon-950: #191e00; /* near-black olive — text on neon buttons */

  --konda-navy-950: #0b1c30; /* primary text / dark-mode canvas */
  --konda-navy-800: #213145; /* dark-mode surface bright */
  --konda-navy-700: #1d2b3e; /* dark-mode surface dim */
  --konda-navy-600: #142133; /* dark-mode surface container low */
  --konda-navy-500: #1a293d; /* dark-mode surface container */
  --konda-navy-400: #2d3f58; /* dark-mode surface container high */
  --konda-navy-300: #384c68; /* dark-mode surface container highest */
  --konda-slate-500: #5c647a; /* secondary text, light mode */
  --konda-slate-300: #8b98b4; /* secondary text, dark mode */

  --konda-blue-50: #f8f9ff;
  --konda-blue-100: #eff4ff;
  --konda-blue-150: #e5eeff;
  --konda-blue-200: #dae2fd;
  --konda-blue-250: #dce9ff;
  --konda-blue-300: #d3e4fe;
  --konda-blue-400: #cbdbf5;

  --konda-secondary-500: #4854bb;
  --konda-secondary-300: #8692fd;
  --konda-secondary-900: #16238e;
  --konda-tertiary-600: #45636b;
  --konda-tertiary-100: #d7f6ff;

  --konda-error-600: #ba1a1a;
  --konda-error-100: #ffdad6;

  --konda-chart-1: #00759f;
  --konda-chart-2: #00668a;
  --konda-chart-3: #565e74;

  /* ---- Semantic — Light mode (default) ---- */
  --color-bg: var(--konda-blue-50);              /* app canvas, 85% */
  --color-surface: #ffffff;                       /* cards, panels */
  --color-surface-dim: var(--konda-blue-400);
  --color-surface-container-low: var(--konda-blue-100);
  --color-surface-container: var(--konda-blue-150);
  --color-surface-container-high: var(--konda-blue-250);
  --color-surface-container-highest: var(--konda-blue-300);

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(0, 0, 0, 0.15);

  --color-text-primary: var(--konda-navy-950);
  --color-text-secondary: var(--konda-slate-500);
  --color-text-on-neon: var(--konda-neon-950);

  --color-primary: var(--konda-neon-500);         /* signature neon guide, 5% */
  --color-primary-hover: var(--konda-neon-600);
  --color-primary-dim: var(--konda-neon-700);

  --color-secondary: var(--konda-secondary-500);
  --color-secondary-container: var(--konda-secondary-300);
  --color-on-secondary-container: var(--konda-secondary-900);
  --color-tertiary: var(--konda-tertiary-600);
  --color-tertiary-container: var(--konda-tertiary-100);

  --color-error: var(--konda-error-600);
  --color-error-container: var(--konda-error-100);

  --color-chart-1: var(--konda-chart-1);
  --color-chart-2: var(--konda-chart-2);
  --color-chart-3: var(--konda-chart-3);

  --color-glass-bg: rgba(255, 255, 255, 0.75);
}

/* ---- Semantic — Dark mode ----
   Toggle by adding class="dark" on <html> (matches konda-frontend convention).
   The neon accent stays IDENTICAL between modes — brand identity never dims. */
.dark {
  --color-bg: var(--konda-navy-950);
  --color-surface: var(--konda-navy-800);
  --color-surface-dim: var(--konda-navy-700);
  --color-surface-container-low: var(--konda-navy-600);
  --color-surface-container: var(--konda-navy-500);
  --color-surface-container-high: var(--konda-navy-400);
  --color-surface-container-highest: var(--konda-navy-300);

  --color-border: #3f5068;
  --color-border-hover: #506482;

  --color-text-primary: #ffffff;
  --color-text-secondary: var(--konda-slate-300);
  --color-text-on-neon: var(--konda-neon-950);

  --color-primary: var(--konda-neon-500);
  --color-primary-hover: var(--konda-neon-600);
  --color-primary-dim: var(--konda-neon-700);

  --color-glass-bg: rgba(33, 49, 69, 0.7);
}