/*
 * SecondBrain design tokens — single source of truth for the web UI and the
 * Chrome extension. chrome-extension/themes.css must stay a byte-identical
 * copy (tests/test_theme_tokens_sync.py enforces it).
 *
 * Colors are space-separated RGB triplets so Tailwind can apply opacity:
 *   rgb(var(--c-primary) / <alpha-value>)
 *
 * Themes (set on <html data-theme="…">):
 *   classic     — the original dark Material look, opaque surfaces
 *   light_glass — Liquid Glass inspired, light
 *   dark_glass  — Liquid Glass inspired, dark
 */

:root,
[data-theme="classic"] {
  color-scheme: dark;
  --c-background: 14 14 14;
  --c-surface: 14 14 14;
  --c-surface-bright: 44 44 44;
  --c-surface-variant: 37 38 38;
  --c-surface-container-lowest: 0 0 0;
  --c-surface-container-low: 19 19 19;
  --c-surface-container: 25 26 26;
  --c-surface-container-high: 31 32 32;
  --c-surface-container-highest: 37 38 38;
  --c-on-background: 231 229 228;
  --c-on-surface: 231 229 228;
  --c-on-surface-variant: 172 171 170;
  --c-outline: 118 117 117;
  --c-outline-variant: 72 72 72;
  --c-primary: 184 196 255;
  --c-primary-dim: 166 181 253;
  --c-on-primary: 44 59 123;
  --c-primary-container: 51 66 130;
  --c-on-primary-container: 197 206 255;
  --c-secondary: 143 159 183;
  --c-on-secondary: 16 33 52;
  --c-secondary-container: 45 60 81;
  --c-on-secondary-container: 176 192 218;
  --c-tertiary: 172 138 255;
  --c-on-tertiary: 40 0 103;
  --c-tertiary-container: 143 96 250;
  --c-error: 238 125 119;
  --c-error-container: 96 20 16;
  --c-heading: 255 255 255;
  --c-header: 14 14 14;

  --wallpaper: rgb(var(--c-surface-container-lowest));
  --scrim: rgba(0, 0, 0, 0.6);
  --surface-alpha: 1;
  --glass-blur: none;
  --glass-border: transparent;
  --glass-highlight: none;
  --glass-shadow: none;
  --radius-panel: 0.75rem;

  --graph-bg: #191a1a;
  --graph-link: #484848;
  --graph-semantic: #8f60fa;
  --graph-arrow: #ac8aff;
  --graph-seed: #b8c4ff;
  --graph-selected: #ffffff;
}

[data-theme="dark_glass"] {
  color-scheme: dark;
  --c-background: 10 12 20;
  --c-surface: 10 12 20;
  --c-surface-bright: 70 74 92;
  --c-surface-variant: 44 47 60;
  --c-surface-container-lowest: 6 8 14;
  --c-surface-container-low: 28 30 40;
  --c-surface-container: 36 38 50;
  --c-surface-container-high: 46 49 62;
  --c-surface-container-highest: 58 61 76;
  --c-on-background: 245 245 247;
  --c-on-surface: 245 245 247;
  --c-on-surface-variant: 178 180 190;
  --c-outline: 128 130 142;
  --c-outline-variant: 120 124 140;
  --c-primary: 126 182 255;
  --c-primary-dim: 100 160 245;
  --c-on-primary: 0 30 72;
  --c-primary-container: 26 64 124;
  --c-on-primary-container: 204 226 255;
  --c-secondary: 156 166 186;
  --c-on-secondary: 16 24 36;
  --c-secondary-container: 46 54 72;
  --c-on-secondary-container: 196 206 226;
  --c-tertiary: 200 140 255;
  --c-on-tertiary: 44 0 92;
  --c-tertiary-container: 150 80 230;
  --c-error: 255 112 104;
  --c-error-container: 96 22 22;
  --c-heading: 255 255 255;
  --c-header: 20 22 32;

  --wallpaper:
    radial-gradient(60rem 40rem at 10% -10%, rgba(64, 108, 255, 0.35), transparent 60%),
    radial-gradient(50rem 36rem at 100% 20%, rgba(176, 82, 255, 0.28), transparent 60%),
    radial-gradient(48rem 40rem at 40% 120%, rgba(0, 190, 200, 0.22), transparent 60%),
    linear-gradient(160deg, #0a0c16 0%, #0d1020 50%, #08090f 100%);
  --scrim: rgba(4, 6, 14, 0.45);
  --surface-alpha: 0.52;
  --glass-blur: blur(24px) saturate(180%);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --radius-panel: 1.25rem;

  --graph-bg: #0b0d18;
  --graph-link: #4a4f66;
  --graph-semantic: #a46cff;
  --graph-arrow: #c88cff;
  --graph-seed: #7eb6ff;
  --graph-selected: #ffffff;
}

[data-theme="light_glass"] {
  color-scheme: light;
  --c-background: 242 242 247;
  --c-surface: 242 242 247;
  --c-surface-bright: 255 255 255;
  --c-surface-variant: 229 229 236;
  --c-surface-container-lowest: 246 246 250;
  --c-surface-container-low: 255 255 255;
  --c-surface-container: 255 255 255;
  --c-surface-container-high: 244 244 248;
  --c-surface-container-highest: 232 232 238;
  --c-on-background: 28 28 30;
  --c-on-surface: 28 28 30;
  --c-on-surface-variant: 88 88 96;
  --c-outline: 142 142 150;
  --c-outline-variant: 160 160 172;
  --c-primary: 0 108 230;
  --c-primary-dim: 0 92 200;
  --c-on-primary: 255 255 255;
  --c-primary-container: 214 230 255;
  --c-on-primary-container: 0 58 130;
  --c-secondary: 84 94 114;
  --c-on-secondary: 255 255 255;
  --c-secondary-container: 226 231 240;
  --c-on-secondary-container: 44 54 74;
  --c-tertiary: 150 60 210;
  --c-on-tertiary: 255 255 255;
  --c-tertiary-container: 170 80 230;
  --c-error: 215 40 32;
  --c-error-container: 255 222 220;
  --c-heading: 0 0 0;
  --c-header: 255 255 255;

  --wallpaper:
    radial-gradient(60rem 40rem at 0% -10%, rgba(120, 170, 255, 0.45), transparent 60%),
    radial-gradient(50rem 36rem at 100% 10%, rgba(255, 170, 220, 0.40), transparent 60%),
    radial-gradient(52rem 40rem at 50% 120%, rgba(140, 230, 210, 0.40), transparent 60%),
    linear-gradient(160deg, #f4f6fb 0%, #eef0f8 50%, #f7f3f8 100%);
  --scrim: rgba(240, 242, 248, 0.45);
  --surface-alpha: 0.6;
  --glass-blur: blur(24px) saturate(180%);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  --glass-shadow: 0 8px 30px rgba(30, 40, 80, 0.12);
  --radius-panel: 1.25rem;

  --graph-bg: #eef0f7;
  --graph-link: #b4b8c8;
  --graph-semantic: #9a4fe0;
  --graph-arrow: #7a3ec8;
  --graph-seed: #006ce6;
  --graph-selected: #000000;
}

/* A glass panel: opaque in Classic, frosted in the Glass themes. */
.sb-glass {
  background-color: rgb(var(--c-surface-container) / var(--surface-alpha));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

body {
  background: var(--wallpaper);
  background-attachment: fixed;
}

/* Users who ask for less transparency, and browsers without backdrop-filter,
   get opaque Glass surfaces. */
@media (prefers-reduced-transparency: reduce) {
  [data-theme$="glass"] { --surface-alpha: 1; --glass-blur: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme$="glass"] { --surface-alpha: 0.96; }
}