/* ===== Shared Theme — Light & Dark Tokens, Reset, Scrollbars ===== */

/* === Light Theme Tokens === */
:root {
  --md-primary: #1a73e8;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;
  --md-secondary: #5f6368;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8eaed;
  --md-on-secondary-container: #1f1f1f;
  --md-surface: #ffffff;
  --md-surface-dim: #f8f9fa;
  --md-surface-bright: #ffffff;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f8f9fa;
  --md-surface-container: #f1f3f4;
  --md-surface-container-high: #e8eaed;
  --md-surface-container-highest: #dadce0;
  --md-on-surface: #1f1f1f;
  --md-on-surface-variant: #444746;
  --md-outline: #747775;
  --md-outline-variant: #c4c7c5;
  --md-inverse-surface: #303030;
  --md-inverse-on-surface: #f1f3f4;
  --md-error: #d93025;
  --md-on-error: #ffffff;
  --md-error-container: #fce8e6;

  --bg: #ffffff;
  --bg2: #f8f9fa;
  --bg-main: #f7f8fc;
  --surface: #f1f3f4;
  --surface2: #e8eaed;
  --border: #dadce0;
  --border-light: #e8eaed;
  --text: #1f1f1f;
  --text2: #444746;
  --on-surface-variant: #444746;
  --muted: #70757a;
  --accent: #1a73e8;
  --accent-light: #e8f0fe;
  --accent-dim: #d3e3fd;
  --green: #188038;
  --red: #d93025;
  --yellow: #e37400;
  --radius: 24px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --font: 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --sidebar-width: 272px;
  --transition: 100ms ease;
  --transition-emphasized: 400ms cubic-bezier(0.2, 0, 0, 1);
  --code-bg: #1e1e1e;
  --code-text: #d4d4d4;
  --code-muted: #999;
  --on-accent: #ffffff;
  --trend-red: #dc2626;
  --trend-green: #059669;
  --insight-bg-start: #eef2ff;
  --insight-bg-end: #e0e7ff;
  --insight-border: #c7d2fe;
  --insight-heading: #4338ca;
  --insight-text: #3730a3;
}

/* === Dark Theme Tokens === */
body.dark {
  --md-primary: #8ab4f8;
  --md-on-primary: #062e6f;
  --md-primary-container: #0842a0;
  --md-on-primary-container: #d3e3fd;
  --md-secondary: #c4c7c5;
  --md-on-secondary: #303030;
  --md-secondary-container: #444746;
  --md-on-secondary-container: #e8eaed;
  --md-surface: #1e1e1e;
  --md-surface-dim: #131314;
  --md-surface-bright: #37393b;
  --md-surface-container-lowest: #0e0e0e;
  --md-surface-container-low: #1e1e1e;
  --md-surface-container: #282a2c;
  --md-surface-container-high: #333537;
  --md-surface-container-highest: #3c4043;
  --md-on-surface: #e3e3e3;
  --md-on-surface-variant: #9aa0a6;
  --md-outline: #8e918f;
  --md-outline-variant: #444746;
  --md-inverse-surface: #e3e3e3;
  --md-inverse-on-surface: #303030;
  --md-error: #f28b82;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;

  --bg: #1e1e1e;
  --bg2: #1a1a1a;
  --bg-main: #1a1a1a;
  --surface: #282a2c;
  --surface2: #333537;
  --border: #3c4043;
  --border-light: #333537;
  --text: #e3e3e3;
  --text2: #9aa0a6;
  --on-surface-variant: #9aa0a6;
  --muted: #9aa0a6;
  --accent: #8ab4f8;
  --accent-light: rgba(138, 180, 248, 0.08);
  --accent-dim: rgba(138, 180, 248, 0.16);
  --green: #81c995;
  --red: #f28b82;
  --yellow: #fdd663;
  --code-bg: var(--md-surface-container);
  --code-text: var(--text);
  --code-muted: var(--muted);
  --trend-red: #f28b82;
  --trend-green: #81c995;
  --insight-bg-start: #1e1b4b;
  --insight-bg-end: #312e81;
  --insight-border: #4338ca;
  --insight-heading: #a5b4fc;
  --insight-text: #a5b4fc;
}

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

/* === Scrollbars (global) === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
*:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
body.dark *:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(0,0,0,0.15) transparent; }
body.dark *:hover { scrollbar-color: rgba(255,255,255,0.12) transparent; }