/* BioStudio AI — OS-wide color sub-themes.
   These palettes sit above the structural OS styles: Windows/macOS chrome,
   dashboard layout, typography, radii and motion stay intact while surfaces,
   contrast and (for the two expressive palettes) accents change together. */

#os[data-color-theme="white"],
body[data-color-theme="white"] {
  --ct-scheme: light;
  --ct-desktop: #eef2f7;
  --ct-bg: #f4f6f9;
  --ct-surface: rgba(255, 255, 255, 0.94);
  --ct-surface-2: #f2f5f9;
  --ct-surface-3: #e8edf4;
  --ct-titlebar: rgba(249, 250, 252, 0.94);
  --ct-flyout: rgba(255, 255, 255, 0.96);
  --ct-input: #ffffff;
  --ct-text: #172033;
  --ct-muted: #647087;
  --ct-faint: #8e99aa;
  --ct-line: rgba(25, 42, 68, 0.14);
  --ct-line-strong: rgba(25, 42, 68, 0.22);
  --ct-hover: rgba(25, 42, 68, 0.065);
  --ct-taskbar: rgba(250, 251, 253, 0.86);
  --ct-shadow: 0 22px 60px rgba(35, 47, 70, 0.16);
}

#os[data-color-theme="black"],
body[data-color-theme="black"] {
  --ct-scheme: dark;
  --ct-desktop: #06070a;
  --ct-bg: #090b0f;
  --ct-surface: rgba(15, 17, 22, 0.96);
  --ct-surface-2: #151820;
  --ct-surface-3: #1d212b;
  --ct-titlebar: rgba(12, 14, 18, 0.96);
  --ct-flyout: rgba(16, 18, 24, 0.97);
  --ct-input: #0b0d12;
  --ct-text: #f4f6fa;
  --ct-muted: #a1a9b8;
  --ct-faint: #737c8c;
  --ct-line: rgba(255, 255, 255, 0.11);
  --ct-line-strong: rgba(255, 255, 255, 0.18);
  --ct-hover: rgba(255, 255, 255, 0.075);
  --ct-taskbar: rgba(8, 9, 13, 0.9);
  --ct-shadow: 0 26px 72px rgba(0, 0, 0, 0.58);
}

#os[data-color-theme="ocean"],
body[data-color-theme="ocean"] {
  --ct-scheme: dark;
  --ct-desktop: #04131d;
  --ct-bg: #061722;
  --ct-surface: rgba(9, 31, 44, 0.91);
  --ct-surface-2: #0d2939;
  --ct-surface-3: #12384a;
  --ct-titlebar: rgba(7, 25, 36, 0.94);
  --ct-flyout: rgba(9, 33, 47, 0.95);
  --ct-input: #061b28;
  --ct-text: #e8f8ff;
  --ct-muted: #9bc3d2;
  --ct-faint: #6f9aaa;
  --ct-line: rgba(74, 202, 232, 0.2);
  --ct-line-strong: rgba(74, 202, 232, 0.34);
  --ct-hover: rgba(34, 211, 238, 0.11);
  --ct-taskbar: rgba(5, 24, 35, 0.88);
  --ct-shadow: 0 26px 76px rgba(0, 8, 18, 0.6), 0 0 44px rgba(34, 211, 238, 0.09);
  --ct-accent: #22d3ee;
  --ct-accent-strong: #67e8f9;
  --ct-accent-soft: rgba(34, 211, 238, 0.15);
  --ct-accent-ink: #031116;
}

#os[data-color-theme="orchid"],
body[data-color-theme="orchid"] {
  --ct-scheme: dark;
  --ct-desktop: #17091d;
  --ct-bg: #1b0c22;
  --ct-surface: rgba(39, 16, 48, 0.92);
  --ct-surface-2: #32173d;
  --ct-surface-3: #43204f;
  --ct-titlebar: rgba(31, 12, 39, 0.95);
  --ct-flyout: rgba(42, 17, 51, 0.96);
  --ct-input: #210e29;
  --ct-text: #fff1ff;
  --ct-muted: #d1acce;
  --ct-faint: #a47da4;
  --ct-line: rgba(232, 121, 249, 0.2);
  --ct-line-strong: rgba(244, 114, 182, 0.34);
  --ct-hover: rgba(216, 112, 255, 0.12);
  --ct-taskbar: rgba(29, 10, 36, 0.9);
  --ct-shadow: 0 26px 76px rgba(15, 2, 22, 0.62), 0 0 48px rgba(217, 70, 239, 0.1);
  --ct-accent: #d870ff;
  --ct-accent-strong: #f0abfc;
  --ct-accent-soft: rgba(216, 112, 255, 0.16);
  --ct-accent-ink: #19051f;
}

/* Shared remap. The aliases cover the shell, dashboard families, legacy
   science apps, and the default per-window White palette (which consumes the
   --mono-* set). A window with its own explicit color remains independent. */
html #os[data-color-theme][data-os-theme],
html body[data-color-theme][data-os-theme] {
  color-scheme: var(--ct-scheme);
  color: var(--ct-text);
  --ink: var(--ct-text);
  --ink-soft: var(--ct-muted);
  --ink-faint: var(--ct-faint);
  --text: var(--ct-text);
  --muted: var(--ct-muted);
  --faint: var(--ct-faint);
  --bg: var(--ct-bg);
  --surface: var(--ct-surface);
  --surface-2: var(--ct-surface-2);
  --surface-3: var(--ct-surface-3);
  --border: var(--ct-line);
  --line: var(--ct-line);

  --win-bg: var(--ct-surface);
  --win-body-bg: var(--ct-bg);
  --win-border: var(--ct-line);
  --titlebar-bg: var(--ct-titlebar);
  --flyout-bg: var(--ct-flyout);
  --flyout-border: var(--ct-line);
  --tile-bg: var(--ct-surface-2);
  --tile-hover: var(--ct-hover);
  --input-bg: var(--ct-input);
  --input-border: var(--ct-line-strong);
  --win-hover-bg: var(--ct-hover);
  --win-shadow: var(--ct-shadow);
  --win-shadow-focus: var(--ct-shadow), 0 0 0 1px var(--win-border-focus, var(--accent));
  --taskbar-bg: var(--ct-taskbar);
  --taskbar-border: var(--ct-line);
  --tb-hover: var(--ct-hover);
  --tb-active: var(--ct-hover);

  --app-bg: var(--ct-bg);
  --app-bar: var(--ct-titlebar);
  --app-line: var(--ct-line);
  --app-btn: var(--ct-surface-2);
  --app-btn-hover: var(--ct-hover);
  --app-input: var(--ct-input);
  --menu-bg: var(--ct-flyout);
  --menu-border: var(--ct-line);
  --menu-hover: var(--ct-hover);
  --panel: var(--ct-surface);
  --panel-2: var(--ct-surface-2);
  --panel-3: var(--ct-surface-3);
  --glass-bg: var(--ct-flyout);
  --settings-card: var(--ct-surface);
  --settings-soft: var(--ct-surface-2);

  --os-win-bg: var(--ct-surface);
  --os-win-body: var(--ct-bg);
  --os-titlebar: var(--ct-titlebar);
  --os-flyout: var(--ct-flyout);
  --os-ink: var(--ct-text);
  --os-ink-soft: var(--ct-muted);
  --os-border: var(--ct-line);
  --os-input: var(--ct-input);
  --os-hover: var(--ct-hover);

  --mono-bg: var(--ct-bg);
  --mono-surface: var(--ct-surface);
  --mono-surface-2: var(--ct-surface-2);
  --mono-surface-3: var(--ct-surface-3);
  --mono-ink: var(--ct-text);
  --mono-ink-soft: var(--ct-muted);
  --mono-faint: var(--ct-faint);
  --mono-line: var(--ct-line);
  --mono-control-bg: var(--ct-input);
  --mono-control-line: var(--ct-line-strong);
  --mono-glass: var(--ct-flyout);
  --mono-shadow: var(--ct-shadow);
  --mono-shadow-lg: var(--ct-shadow);
  --mono-win-border: var(--ct-line);
  --mono-hover: var(--ct-hover);
  --mono-plot-grid: var(--ct-line);

  --bsx-bg: var(--ct-bg);
  --bsx-surface: var(--ct-surface);
  --bsx-surface-2: var(--ct-surface-2);
  --bsx-border: var(--ct-line);
  --bsx-shadow: var(--ct-shadow);
  --bsx-shadow-lg: var(--ct-shadow);

  --bs2-ink: var(--ct-text);
  --bs2-ink-soft: var(--ct-muted);
  --bs2-paper: var(--ct-surface);
  --bs2-canvas: var(--ct-bg);
  --bs2-line: var(--ct-line);
  --bs2-line-soft: var(--ct-surface-3);
  --bs2-shadow: var(--ct-shadow);
  --bs2-shadow-lg: var(--ct-shadow);

  --bs1-navy: var(--ct-bg);
  --bs1-indigo: var(--ct-surface-2);
  --bs1-glass: var(--ct-surface);
  --bs1-border: var(--ct-line);
  --bs1-border-active: var(--ct-line-strong);
}

/* The expressive palettes deliberately replace the style accent. White and
   Black keep the selected OS style's own identity color. */
html #os[data-os-theme]:is([data-color-theme="ocean"], [data-color-theme="orchid"]),
html body[data-os-theme]:is([data-color-theme="ocean"], [data-color-theme="orchid"]) {
  --accent: var(--ct-accent) !important;
  --accent-soft: var(--ct-accent-soft);
  --accent-ink: var(--ct-accent-ink);
  --on-primary: var(--ct-accent-ink);
  --primary: var(--ct-accent);
  --primary-strong: var(--ct-accent-strong);
  --primary-soft: var(--ct-accent-soft);
  --win-border-focus: var(--ct-accent);
  --bsx-accent: var(--ct-accent);
  --bsx-accent-strong: var(--ct-accent-strong);
  --bsx-accent-soft: var(--ct-accent-soft);
  --bsx-accent-ink: var(--ct-accent-ink);
  --bs2-blue: var(--ct-accent);
  --bs2-blue-strong: var(--ct-accent-strong);
  --bs2-blue-soft: var(--ct-accent-soft);
  --os-accent: var(--ct-accent);
  --os-accent-soft: var(--ct-accent-soft);
  --os-accent-ink: var(--ct-accent-ink);
  --mono-primary: var(--ct-accent);
  --mono-primary-strong: var(--ct-accent-strong);
  --mono-primary-soft: var(--ct-accent-soft);
  --mono-accent: var(--ct-accent);
  --mono-accent-soft: var(--ct-accent-soft);
  --mono-accent-ink: var(--ct-accent-ink);
  --mono-tech: var(--ct-accent);
  --mono-tech-2: var(--ct-accent-strong);
}

/* Built-in backgrounds follow the palette. Inline custom wallpaper still wins
   because these declarations are not !important. White keeps light windows
   and chrome but sits on a black desktop by design. */
#os[data-color-theme="white"][data-os-theme] {
  background:
    radial-gradient(900px 620px at 82% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    linear-gradient(145deg, #050609, #06070a);
  background-size: cover;
}

/* White's desktop is black, so whatever the home dashboards draw straight on
   the wallpaper (brand, nav, greeting, section titles, the "New project" row,
   the widget panel heading) takes light ink. Cards keep their own colours.
   Mono draws its projects and widgets without cards, so all of it goes light. */
#os[data-color-theme="white"][data-os-theme] .bsx-home {
  --desk-ink: #f4f6fa;
  --desk-ink-soft: rgba(244, 246, 250, 0.64);
}

#os[data-color-theme="white"][data-os-theme] .bsx-home :is(.bsx-brand, .bsx-greeting h1, .bsw-head-title, .bsx-proj-new .bsx-proj-title),
#os[data-color-theme="white"][data-os-theme] .bs3-home .bsx-nav-link.active {
  color: var(--desk-ink);
}

#os[data-color-theme="white"][data-os-theme] .bsx-home :is(.bsx-nav-link:not(.active), .bsx-greeting p, .bsx-sec-title, .bsx-proj-new .bsx-proj-sub, .bsx-proj-new .bsx-proj-glyph) {
  color: var(--desk-ink-soft);
}

#os[data-color-theme="white"][data-os-theme] .bs3-home :is(.bsw-panel, .bsx-proj, .bsx-cmd) {
  --ink: var(--desk-ink);
  --ink-soft: var(--desk-ink-soft);
  color: var(--desk-ink);
}

#os[data-color-theme="white"][data-os-theme] .bs3-home :is(.bsw-panel, .bsx-proj-list, .bsx-cmd) {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Pills keep their light face, so they keep dark ink. */
#os[data-color-theme="white"][data-os-theme] .bs3-home :is(.bsw-edit-btn, .bsx-cmd kbd) {
  color: #171717;
}

#os[data-color-theme="black"][data-os-theme] {
  background:
    radial-gradient(900px 640px at 78% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    linear-gradient(145deg, #050609, var(--ct-desktop));
  background-size: cover;
}

#os[data-color-theme="ocean"][data-os-theme] {
  background:
    radial-gradient(980px 680px at 82% 4%, rgba(34, 211, 238, 0.22), transparent 62%),
    radial-gradient(760px 620px at 6% 96%, rgba(14, 116, 144, 0.22), transparent 64%),
    linear-gradient(145deg, #020b12, var(--ct-desktop));
  background-size: cover;
}

#os[data-color-theme="orchid"][data-os-theme] {
  background:
    radial-gradient(980px 680px at 82% 4%, rgba(216, 112, 255, 0.24), transparent 62%),
    radial-gradient(760px 620px at 8% 96%, rgba(244, 114, 182, 0.18), transparent 64%),
    linear-gradient(145deg, #0d0412, var(--ct-desktop));
  background-size: cover;
}

/* A few identity sheets use literal text/background values for their shipped
   light or dark look. These late, token-based rules complete the four-way
   conversion without changing layout or component geometry. */
#os[data-color-theme] .bsx-home :is(.bsx-greeting h1, .bsx-greeting p),
#os[data-color-theme] .bs2-home,
#os[data-color-theme] .bs1-home {
  color: var(--ink);
}

#os[data-color-theme] :is(input, textarea, select) {
  color-scheme: var(--ct-scheme);
}

#os[data-color-theme] :is(th, .st-toolbar, .st-sidebar, .st-inspector, .st-card) {
  border-color: var(--ct-line);
}

#os[data-color-theme] th {
  background: var(--ct-surface-2);
  color: var(--ct-muted);
}

body[data-color-theme] :is(.ctx-menu, .platform-dialog, .bs-search-box, .tb-preview-popover, .snap-flyout) {
  background-color: var(--ct-flyout);
  color: var(--ct-text);
  border-color: var(--ct-line);
}