/* GENERATED by shared/site/app-theme.php from shared/site/brands.php - do not edit here.
   Explainator: the public site's palette, for the signed-in application. */

@font-face { font-family: "Inter"; src: url("/site/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/site/fonts/spacegrotesk.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root { --display: "Space Grotesk", "Inter", system-ui, sans-serif; --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b14;
  --surface: #12121f;
  --surface2: #1a1a2e;
  --text: #edebff;
  --muted: #a09cc0;
  --accent: #8b7cff;
  --accentInk: #0b0b14;
  --accent2: #22d3ee;
  --glow: rgba(139,124,255,.22);
  --line: #2e2e3c;
  --line-strong: #474655;
  --line-soft: #242331;
  --dim: #787593;
  --field: #090910;
  --surface3: #27273b;
  --accent-hover: #9b8eff;
  --accent-soft: rgba(139,124,255,0.14);
  --accent-line: rgba(139,124,255,0.45);
  --accent-text: #8b7cff;
  --code-bg: #08080e;
  --overlay: rgba(0,0,0,.62);
  --shadow-color: rgba(0,0,0,.5);
  --shadow: 0 18px 48px rgba(0,0,0,.5);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.4);
  --hover: rgba(237,235,255,0.05);
  --hover-strong: rgba(237,235,255,0.09);
  --scrollbar: #3e3d4c;
  --ok: #34d399;
  --ok-bg: #16292e;
  --ok-line: #1f5b4d;
  --ok-text: #7be2bd;
  --warn: #fbbf24;
  --warn-bg: #2e2720;
  --warn-line: #6b5421;
  --warn-text: #fcd571;
  --bad: #f87171;
  --bad-bg: #2e1d29;
  --bad-line: #69363e;
  --bad-text: #faa3a3;
  --info: #60a5fa;
  --info-bg: #1b2439;
  --info-line: #304a72;
  --info-text: #98c5fc;
  --panel: var(--surface);
  --panel2: var(--surface2);
  --bg-elev: var(--surface);
  --bg-elev-2: var(--surface2);
  --bg-input: var(--field);
  --text-dim: var(--muted);
  --text-faint: var(--dim);
  --accent-2: var(--accent2);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7fc;
  --surface: #ffffff;
  --surface2: #eeedf9;
  --text: #16142b;
  --muted: #5b5878;
  --accent: #5b45e0;
  --accentInk: #ffffff;
  --accent2: #0e8fa8;
  --glow: rgba(91,69,224,.13);
  --line: #dcdcdf;
  --line-strong: #bebdc4;
  --line-soft: #eaeaec;
  --dim: #797690;
  --field: #ffffff;
  --surface3: #e3e2ef;
  --accent-hover: #4e3bc1;
  --accent-soft: rgba(91,69,224,0.1);
  --accent-line: rgba(91,69,224,0.4);
  --accent-text: #543fce;
  --code-bg: #f2f1fa;
  --overlay: rgba(15,14,30,0.42);
  --shadow-color: rgba(22,20,43,0.14);
  --shadow: 0 18px 48px rgba(22,20,43,0.14);
  --shadow-sm: 0 8px 24px rgba(22,20,43,0.1);
  --hover: rgba(22,20,43,0.045);
  --hover-strong: rgba(22,20,43,0.08);
  --scrollbar: #c5c4ca;
  --ok: #0f7a4f;
  --ok-bg: #e9f3ef;
  --ok-line: #abd0c1;
  --ok-text: #0d6b46;
  --warn: #9a6200;
  --warn-bg: #f6f1e8;
  --warn-line: #dcc8a6;
  --warn-text: #885600;
  --bad: #c42b2b;
  --bad-bg: #faecec;
  --bad-line: #eab5b5;
  --bad-text: #ac2626;
  --info: #1f68c0;
  --info-bg: #ebf1f9;
  --info-line: #b1cae9;
  --info-text: #1b5ca9;
  --panel: var(--surface);
  --panel2: var(--surface2);
  --bg-elev: var(--surface);
  --bg-elev-2: var(--surface2);
  --bg-input: var(--field);
  --text-dim: var(--muted);
  --text-faint: var(--dim);
  --accent-2: var(--accent2);
}

/* Browser furniture follows the theme too: scrollbars, selection, autofill. */
html[data-theme] { scrollbar-color: var(--scrollbar) transparent; }
html[data-theme] ::selection { background: var(--accent-soft); color: var(--text); }
html[data-theme] input:-webkit-autofill,
html[data-theme] textarea:-webkit-autofill,
html[data-theme] select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--text);
}

/* The theme switch - same sun/moon as the public site's nav. */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.theme-toggle:hover { background: var(--hover-strong); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }