/* Landing page (index.html) — maps the compiled landing app onto the shared tokens (tokens.css).
   Light by default; dark from 19:00 to 07:00 local time (html.dark, set by the landing app).
   No raw colors here: STYLE-STANDARDS.md. */

/* The app's own color names point at the tokens, in both modes. */
:root, html.dark {
  --background: var(--page-bg);
  --foreground: var(--text-primary);
  --card: var(--surface);
  --card-foreground: var(--text-primary);
  --popover: var(--surface-raised);
  --popover-foreground: var(--text-primary);
  --primary: var(--brand-fill);
  --primary-foreground: var(--on-accent);
  --secondary: var(--surface-alt);
  --secondary-foreground: var(--text-secondary);
  --muted: var(--surface-alt);
  --muted-foreground: var(--text-muted);
  --accent: var(--brand-tint);
  --accent-foreground: var(--text-primary);
  --destructive: var(--danger);
  --input: var(--border);
  --ring: var(--brand);
  --sidebar: var(--surface);
  --sidebar-foreground: var(--text-primary);
  --sidebar-primary: var(--brand-fill);
  --sidebar-primary-foreground: var(--on-accent);
  --sidebar-accent: var(--surface-alt);
  --sidebar-accent-foreground: var(--text-primary);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--brand);
  --chart-1: var(--brand);
  --chart-2: var(--brand-deep);
  --chart-3: var(--reward);
  --chart-4: var(--gnosis-red);
  --chart-5: var(--text-muted);
  --font-sans: var(--font-body);
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, monospace;
}
body { background: var(--page-bg); color: var(--text-primary); font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); }

/* "White text" utility classes become theme text, except over the hero video and the fullscreen intro. */
.text-white, .hover\:text-white:hover, .hover\:text-white\/90:hover { color: var(--text-primary); }
.text-white\/80, .text-white\/75, .text-white\/70, .text-white\/65, .hover\:text-white\/70:hover { color: var(--text-secondary); }
.text-white\/60, .text-white\/55, .text-white\/50, .text-white\/45, .text-white\/40, .text-white\/35, .text-white\/30,
.placeholder\:text-white\/30::placeholder { color: var(--text-muted); }
.border-white\/5, .border-white\/10, .border-white\/15 { border-color: var(--border); }
.hover\:border-white\/40:hover { border-color: var(--border-strong); }
.bg-white\/5, .hover\:bg-white\/5:hover { background-color: var(--surface-alt); }
.hover\:bg-white\/10:hover { background-color: var(--brand-tint); }

#hero .text-white, #hero [class*="text-white"], .fixed.inset-0 [class*="text-white"], .fixed.inset-0.text-white { color: var(--on-media); }
#hero .text-white\/80, #hero .text-white\/75, #hero .text-white\/70 { color: color-mix(in srgb, var(--on-media) 80%, transparent); }
#hero .text-white\/60, #hero .text-white\/55, #hero .text-white\/50, #hero .text-white\/40,
.fixed.inset-0 .text-white\/30 { color: color-mix(in srgb, var(--on-media) 60%, transparent); }
#hero .product-identity { color: color-mix(in srgb, var(--on-media) 80%, transparent); }
#hero .product-identity a { color: var(--on-media); }

/* The landing app's own named classes (from its compiled stylesheet) mapped onto tokens. */
.text-neon-violet, .text-neon-cyan, .text-neon-pink { color: var(--brand); }
.text-neon-amber { color: var(--reward-text); }
.bg-deep-purple { background-color: var(--page-bg); }
.bg-mid-purple, .bg-surface-purple { background-color: var(--surface-alt); }
.stat-label { color: var(--text-muted); }
.neon-divider { background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }
.btn-primary { background: var(--brand-fill); color: var(--on-accent); }
.btn-primary::after { background: none; }
.btn-outline-neon { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.card-neon { background: var(--surface); border-color: var(--border); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--brand-deep); box-shadow: 0 0 0 0.1875rem var(--brand-halo); }
  .btn-outline-neon:hover { background: var(--brand-tint); border-color: var(--brand); }
  .card-neon:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); transform: none; box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--shadow-ink) 8%, transparent); }
}

/* Hero stage: near full-screen so the video has room and the slogan clears the navigation (owner 2026-10-04) */
.hero-stage { height: clamp(35rem, 92vh, 56rem); }

/* Secondary button (replaces the one-off glass button; owner 2026-10-04: one button style site-wide) */
.btn-secondary {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
@media (hover: hover) {
  .btn-secondary:hover { background: var(--surface-alt); border-color: var(--brand); box-shadow: 0 0 0 0.1875rem var(--brand-halo); }
}
.btn-secondary:active { background: var(--brand-tint); }

/* Fixed top navigation sits below the fixed announcement banner (owner 2026-10-04: logo was under the banner) */
body:has(.site-announcement) nav.fixed.top-0 { top: var(--banner-h); }

/* Floating chat button: just the round Gnosis avatar (same image as the dashboard top bar); no square, no bounce */
.gnosis-fab { width: 3.5rem; height: 3.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; transition: box-shadow var(--trans-fast, .12s) ease-out; }
.gnosis-fab-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; display: block; filter: drop-shadow(0 0.25rem 0.75rem color-mix(in srgb, var(--shadow-ink) 30%, transparent)); }
.gnosis-fab.is-open { background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-primary); box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--shadow-ink) 20%, transparent); }
.gnosis-fab.is-open svg { color: var(--text-primary); }
@media (hover: hover) { .gnosis-fab:hover { box-shadow: 0 0 0 0.25rem var(--brand-halo); } }

/* "Every subject" chips: one class for border and hover (was inline JS styles) */
.subject-chip { background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.subject-chip-icon { font-size: 1.375rem; color: var(--brand); }
@media (hover: hover) { .subject-chip:hover { border-color: var(--brand); box-shadow: 0 0 0 0.1875rem var(--brand-halo); } }