/* =====================================================================
   THEME TOKENS — Material Design 3 Dark (default) & Light ("White") themes.
   The active theme is set on <html data-theme="dark|light"> by the
   bootstrap script in <head> before first paint (no flash of wrong theme).
   ===================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Material Design 3 Dark Surface Tonal Palette */
  --md-bg: #0b0e14;
  --md-surface: #11151e;
  --md-surface-low: #151a25;
  --md-surface-container: #1b212f;
  --md-surface-high: #232a3b;
  --md-surface-highest: #2c3548;
  --md-tooltip-bg: #262e40;

  --md-on-surface: #eef2f8;
  --md-on-surface-variant: #9ba5b7;
  --md-outline: rgba(255, 255, 255, 0.11);
  --md-outline-variant: rgba(255, 255, 255, 0.06);

  /* Material 3 Accents */
  --md-primary: #a8c7fa;
  --md-primary-strong: #4c8df6;
  --md-primary-container: rgba(76, 141, 246, 0.16);
  --md-on-primary: #062e6f;
  --md-primary-hover: #bdd6ff;

  --md-secondary: #7fcfb6;
  --md-secondary-container: rgba(127, 207, 182, 0.14);

  --md-tertiary: #d0bcff;
  --md-tertiary-container: rgba(208, 188, 255, 0.14);

  --md-warning: #fbbc04;
  --md-danger: #f28b82;
  --md-danger-strong: #ea4335;

  /* Semantic interaction & surface tokens */
  --md-hover-overlay: rgba(255, 255, 255, 0.03);
  --md-row-hover: rgba(255, 255, 255, 0.025);
  --md-focus-ring: rgba(168, 199, 250, 0.15);
  --md-primary-tint: rgba(168, 199, 250, 0.14);
  --md-primary-tint-strong: rgba(168, 199, 250, 0.18);
  --md-primary-tint-weak: rgba(168, 199, 250, 0.07);
  --md-user-bubble-border: rgba(168, 199, 250, 0.25);
  --md-resize-grip: rgba(168, 199, 250, 0.65);
  --md-rec-bg: rgba(234, 67, 53, 0.16);
  --md-rec-fg: #ff9e96;
  --md-rec-border: rgba(234, 67, 53, 0.4);
  --md-on-danger: #ffffff;
  --md-stage-bg: #080a0f;
  --md-media-bg: #06080d;
  --md-media-border: rgba(255, 255, 255, 0.06);
  --md-code-bg: #0c0f16;
  --md-code-fg: #c9d8f0;
  --md-scrim: rgba(6, 9, 15, 0.82);
  --md-scrollbar-thumb: rgba(255, 255, 255, 0.14);

  /* Brand tokens (theme-aware inline logo) */
  --brand-plate: #0b0f17;
  --brand-plate-stroke: #2b3b59;
  --brand-arm-0: #e8f0fe;
  --brand-arm-1: #8ab4f8;
  --brand-arm-2: #3b78e7;
  --brand-vec-0: #a8f0da;
  --brand-vec-1: #38bdf8;
  --brand-vec-2: #14b8a6;
  --brand-core-ring: #8ab4f8;
  --brand-core-iris: #38bdf8;
  --brand-wordmark-gradient: linear-gradient(135deg, #a8c7fa 0%, #38bdf8 55%, #34d399 100%);
  --brand-glow: rgba(56, 189, 248, 0.25);
  --brand-asset-bg: #080c14;

  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-pill: 9999px;

  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.24);
  --md-elevation-2: 0 4px 12px rgba(0,0,0,0.38), 0 2px 4px rgba(0,0,0,0.26);
  --md-elevation-3: 0 10px 28px rgba(0,0,0,0.52);

  --md-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Material Design 3 Light ("White") Theme */
:root[data-theme="light"] {
  color-scheme: light;

  --md-bg: #f3f5f9;
  --md-surface: #ffffff;
  --md-surface-low: #f8f9fc;
  --md-surface-container: #eef1f6;
  --md-surface-high: #e5e9f0;
  --md-surface-highest: #dbe1ea;
  --md-tooltip-bg: #ffffff;

  --md-on-surface: #161b26;
  --md-on-surface-variant: #4a5466;
  --md-outline: rgba(22, 32, 52, 0.16);
  --md-outline-variant: rgba(22, 32, 52, 0.09);

  --md-primary: #0b57d0;
  --md-primary-strong: #0b57d0;
  --md-primary-container: rgba(11, 87, 208, 0.10);
  --md-on-primary: #ffffff;
  --md-primary-hover: #0a4cb8;

  --md-secondary: #0b7356;
  --md-secondary-container: rgba(11, 115, 86, 0.10);

  --md-tertiary: #6741c4;
  --md-tertiary-container: rgba(103, 65, 196, 0.10);

  --md-warning: #a35200;
  --md-danger: #c5221f;
  --md-danger-strong: #d93025;

  --md-hover-overlay: rgba(22, 32, 52, 0.04);
  --md-row-hover: rgba(22, 32, 52, 0.035);
  --md-focus-ring: rgba(11, 87, 208, 0.18);
  --md-primary-tint: rgba(11, 87, 208, 0.09);
  --md-primary-tint-strong: rgba(11, 87, 208, 0.13);
  --md-primary-tint-weak: rgba(11, 87, 208, 0.06);
  --md-user-bubble-border: rgba(11, 87, 208, 0.22);
  --md-resize-grip: rgba(11, 87, 208, 0.5);
  --md-rec-bg: rgba(217, 48, 37, 0.09);
  --md-rec-fg: #b3261e;
  --md-rec-border: rgba(217, 48, 37, 0.35);
  --md-on-danger: #ffffff;
  --md-stage-bg: #e2e6ed;
  --md-media-bg: #0b0e14;
  --md-media-border: rgba(22, 32, 52, 0.12);
  --md-code-bg: #f6f8fb;
  --md-code-fg: #1d2a40;
  --md-scrim: rgba(28, 36, 50, 0.42);
  --md-scrollbar-thumb: rgba(22, 32, 52, 0.2);

  --brand-plate: #ffffff;
  --brand-plate-stroke: #c9d4e6;
  --brand-arm-0: #5b9bff;
  --brand-arm-1: #1f66e0;
  --brand-arm-2: #0b3fa8;
  --brand-vec-0: #2dd4bf;
  --brand-vec-1: #0891d1;
  --brand-vec-2: #0f766e;
  --brand-core-ring: #1f66e0;
  --brand-core-iris: #0891d1;
  --brand-wordmark-gradient: linear-gradient(135deg, #0b57d0 0%, #0478b8 55%, #047857 100%);
  --brand-glow: rgba(11, 87, 208, 0.18);
  --brand-asset-bg: #f1f4f9;

  --md-elevation-1: 0 1px 2px rgba(22,32,52,0.08), 0 1px 3px rgba(22,32,52,0.06);
  --md-elevation-2: 0 4px 12px rgba(22,32,52,0.10), 0 2px 4px rgba(22,32,52,0.06);
  --md-elevation-3: 0 12px 32px rgba(22,32,52,0.16);
}