:root {
  color-scheme: dark;

  --color-ink: 11 14 20;
  --color-panel: 17 21 30;
  --color-line: 31 38 51;
  --color-accent: 94 234 212;
  --color-accent-2: 245 158 11;
  --color-muted: 124 133 152;
  --color-brand: 204 51 51;

  --color-lcars-gold: 255 204 102;
  --color-lcars-orange: 255 153 0;
  --color-lcars-peach: 255 153 102;
  --color-lcars-red: 204 51 51;
  --color-lcars-dark-red: 153 0 0;
  --color-lcars-blue: 153 204 255;
  --color-lcars-pale-blue: 204 221 255;
  --color-lcars-pink: 255 153 204;
  --color-lcars-lavender: 204 153 255;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --radius-panel: 0.5rem;
}

/*
 * Star Trek: The Original Series palette.
 *
 * The application keeps the same accessible layout and semantic token names;
 * only the palette changes. This lets a user switch themes without rebuilding
 * the frontend or changing any authorization/application configuration.
 */
:root[data-theme="tos"] {
  --color-ink: 6 9 12;
  --color-panel: 34 40 45;
  --color-line: 112 123 131;
  --color-accent: 78 163 207;
  --color-accent-2: 218 165 65;
  --color-muted: 190 199 204;
  --color-brand: 210 78 72;

  /* TOS department palette: command, operations/security, sciences/medical. */
  --color-lcars-gold: 218 165 65;
  --color-lcars-orange: 218 165 65;
  --color-lcars-peach: 210 78 72;
  --color-lcars-red: 210 78 72;
  --color-lcars-dark-red: 112 32 32;
  --color-lcars-blue: 78 163 207;
  --color-lcars-pale-blue: 78 163 207;
  --color-lcars-pink: 210 78 72;
  --color-lcars-lavender: 78 163 207;

  --font-display: "Arial Narrow", "Roboto Condensed", sans-serif;
  --radius-panel: 0.25rem;
}

/* TOS is deliberately more than a palette swap: it uses the squared,
 * instrument-console language of the original bridge rather than LCARS. */
:root[data-theme="tos"] body {
  background-color: rgb(4 7 10);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.018) 1px, transparent 1px);
  background-size: 24px 24px;
}

:root[data-theme="tos"] .platform-sidebar {
  background: linear-gradient(180deg, rgb(67 74 79), rgb(29 34 38));
  border-right: 5px solid rgb(var(--color-lcars-gold));
  box-shadow: 8px 0 24px rgb(0 0 0 / 0.45);
}

:root[data-theme="tos"] .platform-brand-header {
  background: rgb(15 18 21);
  border-bottom: 6px solid rgb(var(--color-lcars-red));
  box-shadow: inset 0 -2px 0 rgb(255 255 255 / 0.15);
}

:root[data-theme="tos"] .platform-brand-header img {
  filter: drop-shadow(0 0 7px rgb(var(--color-accent-2) / 0.65));
}

:root[data-theme="tos"] .platform-nav {
  gap: 0.55rem;
  padding-top: 1.25rem;
}

:root[data-theme="tos"] .platform-nav-link {
  border: 1px solid rgb(255 255 255 / 0.22);
  border-left-width: 8px;
  border-radius: 2px !important;
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.22),
    inset 0 -3px 0 rgb(0 0 0 / 0.32),
    0 2px 5px rgb(0 0 0 / 0.4);
  letter-spacing: 0.13em;
  background: linear-gradient(180deg, rgb(70 77 82), rgb(42 48 52)) !important;
  color: rgb(245 247 248) !important;
  opacity: 0.84;
  filter: none;
}

:root[data-theme="tos"] .platform-nav-link:nth-child(3n + 1) {
  border-left-color: rgb(var(--color-lcars-gold));
}

:root[data-theme="tos"] .platform-nav-link:nth-child(3n + 2) {
  border-left-color: rgb(var(--color-lcars-blue));
}

:root[data-theme="tos"] .platform-nav-link:nth-child(3n) {
  border-left-color: rgb(var(--color-lcars-red));
}

:root[data-theme="tos"] .platform-nav-link[aria-current="page"] {
  opacity: 1;
  background: linear-gradient(180deg, rgb(102 111 117), rgb(59 66 71)) !important;
  filter: brightness(1.08);
  outline: 2px solid rgb(255 255 255 / 0.72);
  outline-offset: 2px;
}

:root[data-theme="tos"] .platform-nav-link:hover {
  opacity: 1;
  background: linear-gradient(180deg, rgb(91 99 105), rgb(52 59 64)) !important;
  filter: brightness(1.08);
}

:root[data-theme="tos"] .platform-signout {
  border-radius: 2px !important;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-left: 8px solid rgb(var(--color-lcars-red));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.15);
}

:root[data-theme="tos"] .platform-main {
  background:
    radial-gradient(circle at 85% 15%, rgb(77 176 255 / 0.08), transparent 28rem),
    rgb(var(--color-ink));
}

:root[data-theme="tos"] .platform-topbar {
  height: 18px;
  gap: 8px;
  padding: 4px 8px;
  background: rgb(25 29 33);
  border-bottom: 1px solid rgb(var(--color-line));
}

:root[data-theme="tos"] .platform-topbar > div {
  border-radius: 999px !important;
  box-shadow: 0 0 7px currentColor;
}

:root[data-theme="tos"] .platform-topbar > div:nth-child(1) {
  background: rgb(var(--color-lcars-red));
}

:root[data-theme="tos"] .platform-topbar > div:nth-child(2) {
  background: rgb(var(--color-lcars-gold));
}

:root[data-theme="tos"] .platform-topbar > div:nth-child(3) {
  background: rgb(var(--color-lcars-blue));
}

:root[data-theme="tos"] .platform-main .bg-panel {
  background-image: linear-gradient(145deg, rgb(255 255 255 / 0.035), transparent 55%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 5px 16px rgb(0 0 0 / 0.22);
}

/* ClimaEREL institutional theme
 * Derived from the lab site's published palette (#006372, #2e8491,
 * #e5e5e5), without loading assets or styles from the external WordPress
 * deployment. This remains fully local and suitable for the application UI.
 */
:root[data-theme="climaerel"] {
  color-scheme: light;

  --color-ink: 244 247 247;
  --color-panel: 255 255 255;
  --color-line: 210 218 220;
  --color-accent: 0 99 114;
  --color-accent-2: 46 132 145;
  --color-muted: 82 102 108;
  --color-brand: 0 99 114;

  --color-lcars-gold: 0 99 114;
  --color-lcars-orange: 46 132 145;
  --color-lcars-peach: 88 158 168;
  --color-lcars-red: 0 99 114;
  --color-lcars-dark-red: 0 69 80;
  --color-lcars-blue: 46 132 145;
  --color-lcars-pale-blue: 106 174 183;
  --color-lcars-pink: 0 99 114;
  --color-lcars-lavender: 46 132 145;

  --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --radius-panel: 0.5rem;
}

:root[data-theme="climaerel"] body {
  background: rgb(229 229 229);
}

:root[data-theme="climaerel"] .platform-sidebar {
  background: linear-gradient(180deg, rgb(0 99 114), rgb(0 70 82));
  box-shadow: 4px 0 18px rgb(19 56 63 / 0.2);
}

:root[data-theme="climaerel"] .platform-brand-header {
  background: rgb(255 255 255 / 0.97);
  border-bottom: 4px solid rgb(46 132 145);
}

:root[data-theme="climaerel"] .platform-brand-header .text-accent2 {
  color: rgb(0 99 114);
}

:root[data-theme="climaerel"] .platform-brand-header .text-slate-500 {
  color: rgb(82 102 108);
}

:root[data-theme="climaerel"] .platform-nav {
  gap: 0.25rem;
  padding-top: 1rem;
}

:root[data-theme="climaerel"] .platform-nav-link {
  background: transparent !important;
  border-radius: 4px !important;
  color: rgb(255 255 255) !important;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.04em;
}

:root[data-theme="climaerel"] .platform-nav-link:hover {
  background: rgb(255 255 255 / 0.13) !important;
}

:root[data-theme="climaerel"] .platform-nav-link[aria-current="page"] {
  background: rgb(255 255 255) !important;
  color: rgb(0 99 114) !important;
  box-shadow: 0 4px 12px rgb(0 42 49 / 0.2);
}

:root[data-theme="climaerel"] .platform-signout {
  border-radius: 4px !important;
  background: rgb(0 69 80 / 0.9) !important;
  font-family: var(--font-sans);
}

:root[data-theme="climaerel"] .platform-main {
  background: rgb(229 229 229);
}

:root[data-theme="climaerel"] .platform-topbar {
  height: 6px;
  gap: 0;
  background: linear-gradient(90deg, rgb(0 99 114), rgb(46 132 145));
}

:root[data-theme="climaerel"] .platform-topbar > div {
  background: transparent !important;
}

:root[data-theme="climaerel"] .platform-main .bg-panel {
  background: rgb(255 255 255);
  box-shadow: 0 5px 18px rgb(35 65 71 / 0.1);
}

/* Tailwind's text-white utilities are correct in the two dark themes. The
 * institutional theme uses white cards, so promote those content headings to
 * the lab's charcoal instead; navigation is explicitly kept white above. */
:root[data-theme="climaerel"] .platform-main .text-white {
  color: rgb(38 53 58);
}

:root[data-theme="climaerel"] .platform-main select,
:root[data-theme="climaerel"] .platform-main input,
:root[data-theme="climaerel"] .platform-main textarea {
  background-color: rgb(255 255 255);
  color: rgb(38 53 58);
}