/* Sync with browsergpt-v2/src/index.css — marketing uses browsergpt + light only */
:root,
html[data-theme="browsergpt"] {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);

  --bg: #15191e;
  --bg-elevated: #122c2e;
  --bg-elevated-panel: color-mix(in srgb, #122c2e 70%, transparent);
  --bg-composer: #292d32;
  --bg-nav: #15191e;
  --bg-modal: #1a1e24;
  --bg-soft: #2a2e34;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --teal: #01a492;
  --teal-hover: #01917e;
  --border-accent: #01a492;
  --divide: rgba(255, 255, 255, 0.1);
  --bg-hover: #222830;
  --bg-choice: #222830;
  --shadow-elevated: none;
  --blob-1: #132427;
  --blob-2: #12292b;
  --blob-3: #141f23;
  --hero-glow: color-mix(in srgb, var(--teal) 14%, transparent);
}

html[data-theme="light"] {
  --bg: #f5f8f8;
  --bg-elevated: #ffffff;
  --bg-elevated-panel: #ffffff;
  --bg-composer: #ffffff;
  --bg-nav: #ffffff;
  --bg-modal: #ffffff;
  --bg-soft: #eef2f2;
  --text: #172126;
  --text-muted: rgba(23, 33, 38, 0.55);
  --teal: #01a492;
  --teal-hover: #01917e;
  --border-accent: #01a492;
  --divide: rgba(23, 33, 38, 0.08);
  --bg-hover: #e4eaea;
  --bg-choice: #ffffff;
  --shadow-elevated: 0 1px 2px rgba(23, 33, 38, 0.06), 0 4px 24px rgba(23, 33, 38, 0.08);
  --blob-1: #eaf8f6;
  --blob-2: #f0faf8;
  --blob-3: #edf5f4;
  --hero-glow: color-mix(in srgb, var(--teal) 8%, transparent);
}

html {
  color-scheme: light dark;
}