/* Growth Bot design tokens. CANONICAL COPY: steps/08-design-themes/theme/theme.css.
   Copies are made by steps/08-design-themes/sync_theme.py; edit this file, then run the sync.
   Themes:  <html data-theme="classic|glassy" data-mode="light|dark">  (set by theme.js before first paint)
   No external fonts, images or CDNs: system font stacks only. */

/* ------------------------------------------------------------------ shared, theme-independent tokens */
:root {
  --gb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --gb-font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --gb-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --gb-radius: 16px;
  --gb-radius-sm: 12px;
  --gb-radius-xs: 8px;
  --gb-ease: cubic-bezier(.2, .7, .2, 1);
  --gb-dur: .22s;
  --gb-blur: 0px;
  --gb-brand-teal: #0e7490;
  --gb-brand-gold: #c9a45c;
  --gb-brand-ink: #0f1c2e;
}

/* ------------------------------------------------------------------ Classic · light (also the no-JS default) */
:root,
html[data-theme="classic"][data-mode="light"] {
  color-scheme: light;
  --gb-bg: #f7f5f0;
  --gb-bg-image:
    radial-gradient(720px 380px at 100% 0, rgba(14, 116, 144, .08), transparent 70%),
    radial-gradient(640px 420px at 0 100%, rgba(201, 164, 92, .09), transparent 70%);
  --gb-surface: #ffffff;
  --gb-surface-solid: #ffffff;
  --gb-surface-2: #f3f7f9;
  --gb-surface-hover: #eef4f7;
  --gb-border: #d5e1e8;
  --gb-border-strong: #b9cbd6;
  --gb-text: #0f1c2e;
  --gb-text-muted: #475a6c;
  --gb-heading: #0f1c2e;
  --gb-accent: #0e7490;
  --gb-accent-hover: #0a5c72;
  --gb-accent-text: #ffffff;
  --gb-accent-soft: #e4f3f6;
  --gb-accent-soft-text: #0a5466;
  --gb-link: #0a5c72;
  --gb-gold: #c9a45c;
  --gb-gold-text: #6e5119;
  --gb-warn-bg: #fbf1dd;
  --gb-warn-text: #6e5119;
  --gb-warn-border: rgba(201, 164, 92, .55);
  --gb-ok: #0f7a4f;
  --gb-danger: #a63d2f;
  --gb-header-bg: #0f1c2e;
  --gb-header-text: #f7f5f0;
  --gb-header-muted: #b9c6d3;
  --gb-header-border: rgba(247, 245, 240, .22);
  --gb-tab-active-bg: #0f1c2e;
  --gb-tab-active-text: #f7f5f0;
  --gb-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 10px 28px rgba(15, 28, 46, .07);
  --gb-shadow-lg: 0 24px 60px rgba(15, 28, 46, .14);
  --gb-focus: rgba(14, 116, 144, .45);
  --gb-panel-highlight: none;
  --gb-meta-color: #0f1c2e;
}

/* ------------------------------------------------------------------ Classic · dark */
html[data-theme="classic"][data-mode="dark"] {
  color-scheme: dark;
  --gb-bg: #0b1522;
  --gb-bg-image:
    radial-gradient(720px 380px at 100% 0, rgba(95, 183, 201, .07), transparent 70%),
    radial-gradient(640px 420px at 0 100%, rgba(201, 164, 92, .06), transparent 70%);
  --gb-surface: #132235;
  --gb-surface-solid: #132235;
  --gb-surface-2: #0f1c2c;
  --gb-surface-hover: #1a2c43;
  --gb-border: #24384f;
  --gb-border-strong: #334d69;
  --gb-text: #e9eef3;
  --gb-text-muted: #a8b7c6;
  --gb-heading: #f4f7fa;
  --gb-accent: #5fb7c9;
  --gb-accent-hover: #7fcad9;
  --gb-accent-text: #062530;
  --gb-accent-soft: #143846;
  --gb-accent-soft-text: #a5dde8;
  --gb-link: #8fd0dd;
  --gb-gold: #d6b676;
  --gb-gold-text: #e4c98f;
  --gb-warn-bg: #3a2f17;
  --gb-warn-text: #f0d79f;
  --gb-warn-border: rgba(214, 182, 118, .45);
  --gb-ok: #5fd0a0;
  --gb-danger: #f0907f;
  --gb-header-bg: #081019;
  --gb-header-text: #e9eef3;
  --gb-header-muted: #a8b7c6;
  --gb-header-border: rgba(233, 238, 243, .18);
  --gb-tab-active-bg: #5fb7c9;
  --gb-tab-active-text: #062530;
  --gb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
  --gb-shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
  --gb-focus: rgba(95, 183, 201, .55);
  --gb-panel-highlight: none;
  --gb-meta-color: #081019;
}

/* ------------------------------------------------------------------ Glassy · light */
html[data-theme="glassy"][data-mode="light"] {
  color-scheme: light;
  --gb-blur: 18px;
  --gb-bg: #e9f1f5;
  --gb-bg-image:
    radial-gradient(900px 700px at 4% 0, rgba(95, 183, 201, .55), transparent 65%),
    radial-gradient(800px 640px at 100% 120px, rgba(201, 164, 92, .36), transparent 65%),
    radial-gradient(900px 760px at 0 55%, rgba(124, 140, 230, .26), transparent 65%),
    radial-gradient(900px 760px at 100% 85%, rgba(14, 116, 144, .24), transparent 65%),
    radial-gradient(800px 600px at 30% 100%, rgba(201, 164, 92, .26), transparent 65%);
  --gb-surface: rgba(255, 255, 255, .62);
  --gb-surface-solid: #f8fbfc;
  --gb-surface-2: rgba(255, 255, 255, .55);
  --gb-surface-hover: rgba(255, 255, 255, .78);
  --gb-border: rgba(255, 255, 255, .75);
  --gb-border-strong: rgba(15, 28, 46, .16);
  --gb-text: #0c1828;
  --gb-text-muted: #3b4d60;
  --gb-heading: #0a1524;
  --gb-accent: #0b6a83;
  --gb-accent-hover: #08566b;
  --gb-accent-text: #ffffff;
  --gb-accent-soft: rgba(14, 116, 144, .13);
  --gb-accent-soft-text: #084a5b;
  --gb-link: #08566b;
  --gb-gold: #b48c3f;
  --gb-gold-text: #634813;
  --gb-warn-bg: rgba(251, 236, 205, .8);
  --gb-warn-text: #5e4410;
  --gb-warn-border: rgba(180, 140, 63, .45);
  --gb-ok: #0b6b45;
  --gb-danger: #9a3426;
  --gb-header-bg: rgba(255, 255, 255, .55);
  --gb-header-text: #0c1828;
  --gb-header-muted: #3b4d60;
  --gb-header-border: rgba(15, 28, 46, .14);
  --gb-tab-active-bg: #0c1828;
  --gb-tab-active-text: #ffffff;
  --gb-shadow: 0 1px 1px rgba(255, 255, 255, .6) inset, 0 12px 34px rgba(25, 52, 84, .12);
  --gb-shadow-lg: 0 30px 70px rgba(25, 52, 84, .2);
  --gb-focus: rgba(11, 106, 131, .5);
  --gb-panel-highlight: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  --gb-meta-color: #e9f1f5;
}

/* ------------------------------------------------------------------ Glassy · dark */
html[data-theme="glassy"][data-mode="dark"] {
  color-scheme: dark;
  --gb-blur: 20px;
  --gb-bg: #060d18;
  --gb-bg-image:
    radial-gradient(900px 700px at 4% 0, rgba(14, 116, 144, .55), transparent 65%),
    radial-gradient(800px 640px at 100% 120px, rgba(99, 102, 241, .3), transparent 65%),
    radial-gradient(900px 760px at 0 55%, rgba(95, 183, 201, .2), transparent 65%),
    radial-gradient(900px 760px at 100% 85%, rgba(201, 164, 92, .2), transparent 65%),
    radial-gradient(800px 600px at 30% 100%, rgba(14, 116, 144, .3), transparent 65%);
  --gb-surface: rgba(22, 38, 60, .55);
  --gb-surface-solid: #142338;
  --gb-surface-2: rgba(8, 16, 28, .45);
  --gb-surface-hover: rgba(34, 54, 82, .65);
  --gb-border: rgba(255, 255, 255, .13);
  --gb-border-strong: rgba(255, 255, 255, .24);
  --gb-text: #edf3f8;
  --gb-text-muted: #b2c1cf;
  --gb-heading: #ffffff;
  --gb-accent: #67c6d8;
  --gb-accent-hover: #8ad6e4;
  --gb-accent-text: #04202a;
  --gb-accent-soft: rgba(103, 198, 216, .16);
  --gb-accent-soft-text: #b4e6ef;
  --gb-link: #93d9e6;
  --gb-gold: #dcbd7d;
  --gb-gold-text: #ead29d;
  --gb-warn-bg: rgba(220, 189, 125, .14);
  --gb-warn-text: #f0d9a6;
  --gb-warn-border: rgba(220, 189, 125, .4);
  --gb-ok: #6ad8aa;
  --gb-danger: #f59a8a;
  --gb-header-bg: rgba(8, 16, 28, .5);
  --gb-header-text: #edf3f8;
  --gb-header-muted: #b2c1cf;
  --gb-header-border: rgba(255, 255, 255, .12);
  --gb-tab-active-bg: rgba(103, 198, 216, .92);
  --gb-tab-active-text: #04202a;
  --gb-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 16px 40px rgba(0, 0, 0, .35);
  --gb-shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --gb-focus: rgba(103, 198, 216, .6);
  --gb-panel-highlight: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 42%);
  --gb-meta-color: #060d18;
}

/* ------------------------------------------------------------------ fallback: no backdrop-filter -> solid panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="glassy"] {
    --gb-surface: var(--gb-surface-solid);
    --gb-surface-2: var(--gb-surface-solid);
    --gb-blur: 0px;
  }
  html[data-theme="glassy"][data-mode="light"] { --gb-header-bg: #f8fbfc; --gb-border: #d3e0e8; }
  html[data-theme="glassy"][data-mode="dark"] { --gb-header-bg: #0a1424; }
}
/* People who ask the OS for less transparency get the same solid panels. */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="glassy"] { --gb-surface: var(--gb-surface-solid); --gb-surface-2: var(--gb-surface-solid); --gb-blur: 0px; }
  html[data-theme="glassy"][data-mode="light"] { --gb-header-bg: #f8fbfc; }
  html[data-theme="glassy"][data-mode="dark"] { --gb-header-bg: #0a1424; }
}

/* ------------------------------------------------------------------ base */
html { background-color: var(--gb-bg); }
/* body stays transparent so the fixed mesh layer below (z-index -1) shows through. */
body {
  margin: 0; min-height: 100vh; font-family: var(--gb-font); color: var(--gb-text);
  background: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Background layer: a pseudo-element covering the whole document, so the mesh blobs are spread down long pages
   (no background-attachment: fixed, which is slow / broken on mobile). */
body { position: relative; }
body::before {
  content: ""; position: absolute; inset: 0; min-height: 100vh; z-index: -1; pointer-events: none;
  background-color: var(--gb-bg); background-image: var(--gb-bg-image); background-repeat: no-repeat;
}
/* Before theme.js has run (only possible where it loads async), keep the page invisible for up to 1.2 s. */
html:not([data-theme]) body { opacity: 0; animation: gb-reveal 0s linear 1.2s forwards; }
@keyframes gb-reveal { to { opacity: 1; } }

/* Panels: every "card"-like surface. Glass blur only applies when the theme sets --gb-blur. */
.gb-panel {
  background-color: var(--gb-surface); background-image: var(--gb-panel-highlight);
  border: 1px solid var(--gb-border); border-radius: var(--gb-radius); box-shadow: var(--gb-shadow);
}
html[data-theme="glassy"] .gb-panel,
html[data-theme="glassy"] .gb-glass {
  -webkit-backdrop-filter: blur(var(--gb-blur)) saturate(160%);
  backdrop-filter: blur(var(--gb-blur)) saturate(160%);
}

/* Restrained transitions for theme switches and hover states only. */
body, .gb-panel, .gb-theme-controls button {
  transition: background-color var(--gb-dur) var(--gb-ease), color var(--gb-dur) var(--gb-ease),
              border-color var(--gb-dur) var(--gb-ease), box-shadow var(--gb-dur) var(--gb-ease);
}

/* ------------------------------------------------------------------ theme controls (rendered by theme.js) */
.gb-theme-controls { display: inline-flex; align-items: center; gap: 6px; }
.gb-seg {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: 999px;
  background: rgba(127, 127, 127, .14); border: 1px solid var(--gb-header-border);
}
.gb-theme-controls button {
  appearance: none; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1; cursor: pointer;
  min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; border: 0;
  background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.gb-theme-controls button:hover { background: rgba(127, 127, 127, .16); }
.gb-theme-controls .gb-seg button[aria-pressed="true"] { background: var(--gb-accent); color: var(--gb-accent-text); }
.gb-theme-controls .gb-mode { border: 1px solid var(--gb-header-border); padding: 0; width: 40px; min-height: 40px; }
.gb-theme-controls button:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; }
.gb-theme-controls svg { width: 16px; height: 16px; display: block; }
.gb-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(127, 127, 127, .45); }
.gb-swatch.classic { background: linear-gradient(135deg, #0f1c2e 50%, #f7f5f0 50%); }
.gb-swatch.glassy { background: linear-gradient(135deg, #5fb7c9, #c9a45c 60%, #7c8ce6); }
@media (max-width: 479px) { .gb-theme-controls .gb-label { display: none; } .gb-theme-controls .gb-seg button { padding: 0 9px; } }

.gb-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  html:not([data-theme]) body { animation-delay: 1.2s !important; }
}