/* VSSGEO theme: THE one place for fonts, colors, shape and motion.
   The app (s/evan-dev) defines the same --vg-* names; with this layer on, these values win.
   Rules (docs/WORKFLOW.md): a line belongs to the container, never to what's inside it; shape follows role
   (panels/popovers --vg-r-lg, map buttons --vg-r, buttons in a box --vg-r-sm, toggles/chips --vg-pill, Send a circle);
   spacing in 4/8/12/16 steps.
   Read by the front door (frontdoor.css) and the map (door/door.css). Change a font or a color here
   and both follow. Light and dark are both defined here; the switch sets data-theme on <html>
   and is remembered under localStorage "vssgeo-theme".

   Trying a new font: load it below (Google Fonts or @font-face), then change the three
   --vg-font-* lines. Nothing else needs to change. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* ── type: three roles ── */
  --vg-font-display:"Space Grotesk",system-ui,sans-serif;   /* headings, buttons, labels */
  --vg-font-body:"Manrope",system-ui,sans-serif;            /* reading text, inputs */
  --vg-font-mono:"IBM Plex Mono",ui-monospace,monospace;    /* numbers, prices, data */

  /* ── brand (the same in both themes) ── */
  --vg-red:#b22c2e; --vg-gold:#ebaa1f; --vg-blue:#b5d9ee;

  /* ── surfaces and ink: dark (the default) ── */
  --vg-bg:#07090a;        /* page / map ground */
  --vg-panel:#0d1113;     /* panels and the rail */
  --vg-raise:#12171a;     /* cards, inputs */
  --vg-raise2:#192024;    /* hover, your messages */
  --vg-rule:#1f2629;      /* lines */
  --vg-ink:#f2f0eb; --vg-muted:#9aa3a6; --vg-faint:#8a9396;   /* was #6b7477: testers (Dave, Sam) found small grey text too faint; now >=5:1 */
  --vg-accent:#ebaa1f; --vg-accent-ink:#14191c; --vg-accent-soft:rgba(235,170,31,.13);
  --vg-shadow:0 18px 50px rgba(0,0,0,.5);
  --vg-glass:rgba(13,17,19,.92);   /* map controls floating over the map */

  /* ── the chat (candidates for per-user settings later: "my Geo bubbles are…") ── */
  --vg-geo-bubble:#b22c2e; --vg-geo-ink:#ffffff;            /* Geo: red, white text */
  --vg-you-bubble:#1f282c; --vg-you-ink:#f2f0eb;            /* you */

  /* ── shape ── */
  --vg-r:12px; --vg-r-sm:9px; --vg-r-lg:16px; --vg-pill:999px;
  --vg-spring:cubic-bezier(.34,1.56,.64,1);   /* the Figma-ish overshoot */
  --vg-s1:4px; --vg-s2:8px; --vg-s3:12px; --vg-s4:16px;   /* spacing steps (shared with the app, Evan 2026-09-25) */

  /* ── motion: the spinning outline is gold → red → blue (door.css, frontdoor.css) ── */
  --vg-flow:linear-gradient(180deg,#ebaa1f,#b22c2e,#b5d9ee,#ebaa1f);
}
:root[data-theme="light"]{
  --vg-bg:#fbfaf8; --vg-panel:#f2f0eb; --vg-raise:#ffffff; --vg-raise2:#efede8; --vg-rule:#e2dfd8;
  --vg-ink:#14191c; --vg-muted:#6b6660; --vg-faint:#78726a;
  --vg-accent:#b22c2e; --vg-accent-ink:#fafafa; --vg-accent-soft:rgba(178,44,46,.11);
  --vg-shadow:0 18px 50px rgba(20,25,28,.16);
  --vg-glass:rgba(255,255,255,.94);
  --vg-you-bubble:#ffffff; --vg-you-ink:#14191c;
}

@property --vg-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes vg-spin{to{--vg-ang:360deg}}
@keyframes vg-flow{to{background-position:0 200%}}
@keyframes vg-sheen{to{left:130%}}
@keyframes vg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vg-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vg-dots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* the X that turns: every close button in the product */
.x,button[aria-label="Close"],button[aria-label^="Close "]{transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .2s,border-color .2s}
.x:hover,button[aria-label="Close"]:hover,button[aria-label^="Close "]:hover{transform:rotate(90deg) scale(1.08)}
.x:active,button[aria-label="Close"]:active{transform:rotate(90deg) scale(.92)}
@media (prefers-reduced-motion:reduce){.x,button[aria-label="Close"]{transition:none}.x:hover,button[aria-label="Close"]:hover{transform:none}}

/* ── switching light/dark: the whole screen changes at once, as one cross-fade ──
   (vgTheme() in each page wraps the switch in a View Transition; without that API, transitions
   are simply paused for the switch so nothing cascades.) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
html.vg-theming,html.vg-theming *,html.vg-theming *::before,html.vg-theming *::after{transition:none!important}