/* Verdanity design tokens — imported from the claude.ai/design project
   "LL97 Building Exposure Check" (verdanity-design-system-019e1dc6…).
   Colors, typography, and effects, consolidated. Do not hand-edit values;
   re-pull from the design project if the system changes. */

/* Figtree — brand typeface (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* --- Brand greens --- */
  --green-50:#E6FBF3; --green-100:#DFFAF0; --green-200:#A8F0D8; --green-300:#6FE5BE;
  --green-400:#2DD79E; --green-500:#05C586; --green-600:#04AD78; --green-700:#039066;
  --green-800:#02714F; --accent:#00FFAB;

  /* --- Warm neutrals --- */
  --white:#FFFFFF; --ink-50:#F5F5F5; --ink-100:#EFEEEE; --ink-200:#E2DEDF; --ink-300:#C9C4C5;
  --ink-400:#A39D9E; --ink-500:#7A7476; --ink-600:#5C5658; --ink-700:#423D3E; --ink-800:#2E2A2B;
  --ink-900:#231F20; --ink-950:#1A1617;

  /* --- Functional --- */
  --info:#2E8FE0; --warn:#E8A12B; --danger:#E5533D; --success:#05C586;

  /* --- Semantic (light) --- */
  --color-bg:#F5FFFB; --color-bg-subtle:#FFFFFF; --color-surface:#F5FFFB;
  --color-surface-sunken:#F5F5F5; --color-surface-raised:#FFFFFF; --color-surface-dark:#231F20;
  --color-border:#E7E4E2; --color-border-strong:#C9C4C5; --color-border-subtle:#F0EEEE;
  --color-text:#231F20; --color-text-muted:#5C5658; --color-text-subtle:#7A7476; --color-text-inverse:#FFFFFF;
  --color-primary:#05C586; --color-primary-hover:#04AD78; --color-primary-press:#039066;
  --color-on-primary:#FFFFFF; --color-primary-soft:#DFFAF0; --color-primary-soft-text:#02714F;
  --color-accent:#00FFAB; --color-focus-ring:rgba(5,197,134,.45);
  --color-gate-border:var(--green-200);   /* email-gate outer edge (themed for dark) */
  --color-input-bg:#FFFFFF;               /* text inputs stay white on the mint surface */
  color-scheme: light;

  /* --- Typography --- */
  --font-sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* --- Effects --- */
  --shadow-xs:0 1px 2px rgba(35,31,32,.06); --shadow-sm:0 2px 6px rgba(35,31,32,.07);
  --shadow-md:0 6px 20px rgba(35,31,32,.09); --shadow-lg:0 16px 44px rgba(35,31,32,.12);
  --shadow-xl:0 30px 70px rgba(35,31,32,.16);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --gradient-brand:linear-gradient(135deg,#05C586 0%,#00FFAB 100%);
  --gradient-brand-soft:linear-gradient(135deg,#DFFAF0 0%,#E6FBF3 100%);
  --gradient-dark:linear-gradient(160deg,#2E2A2B 0%,#231F20 60%,#1A1617 100%);
}

/* ── Dark mode ────────────────────────────────────────────────────────────
   The widget is embedded as an iframe, so it follows the OS/parent color
   scheme by default (prefers-color-scheme). The embedding page can force a
   theme by loading the iframe with ?theme=dark|light or posting
   {type:"ll97-theme", theme:"dark"} — the host sets data-theme on <html>.

   Only semantic tokens are remapped, so the widget markup (which reads the
   semantics) recolors without change. Dark uses the brand's warm-ink surfaces
   (ink-900/950) with green accents — the same language as the always-dark
   "exposure" panel and verdanity.com. The two selectors below carry identical
   values: one for auto (no explicit choice), one for an explicit dark toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg:#1A1617; --color-bg-subtle:#231F20; --color-surface:#231F20;
    --color-surface-sunken:#2E2A2B; --color-surface-raised:#2E2A2B; --color-surface-dark:#141011;
    --color-border:rgba(255,255,255,.11); --color-border-strong:rgba(255,255,255,.24); --color-border-subtle:rgba(255,255,255,.07);
    --color-text:#F5F5F5; --color-text-muted:#C9C4C5; --color-text-subtle:#A39D9E; --color-text-inverse:#231F20;
    --color-primary:#05C586; --color-primary-hover:#04AD78; --color-primary-press:#039066;
    --color-on-primary:#FFFFFF; --color-primary-soft:rgba(45,215,158,.16); --color-primary-soft-text:#6FE5BE;
    --color-focus-ring:rgba(45,215,158,.5); --color-gate-border:rgba(45,215,158,.30); --color-input-bg:#231F20;
    --warn:#F0AE3C; --danger:#FF6B54;
    --shadow-xs:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.5);
    --shadow-md:0 6px 20px rgba(0,0,0,.55); --shadow-lg:0 18px 46px rgba(0,0,0,.62);
    --shadow-xl:0 30px 70px rgba(0,0,0,.7);
    --gradient-brand-soft:linear-gradient(135deg,#233029 0%,#1C2420 100%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:#1A1617; --color-bg-subtle:#231F20; --color-surface:#231F20;
  --color-surface-sunken:#2E2A2B; --color-surface-raised:#2E2A2B; --color-surface-dark:#141011;
  --color-border:rgba(255,255,255,.11); --color-border-strong:rgba(255,255,255,.24); --color-border-subtle:rgba(255,255,255,.07);
  --color-text:#F5F5F5; --color-text-muted:#C9C4C5; --color-text-subtle:#A39D9E; --color-text-inverse:#231F20;
  --color-primary:#05C586; --color-primary-hover:#04AD78; --color-primary-press:#039066;
  --color-on-primary:#FFFFFF; --color-primary-soft:rgba(45,215,158,.16); --color-primary-soft-text:#6FE5BE;
  --color-focus-ring:rgba(45,215,158,.5); --color-gate-border:rgba(45,215,158,.30); --color-input-bg:#231F20;
  --warn:#F0AE3C; --danger:#FF6B54;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.5);
  --shadow-md:0 6px 20px rgba(0,0,0,.55); --shadow-lg:0 18px 46px rgba(0,0,0,.62);
  --shadow-xl:0 30px 70px rgba(0,0,0,.7);
  --gradient-brand-soft:linear-gradient(135deg,#233029 0%,#1C2420 100%);
}

*{box-sizing:border-box}
html,body{margin:0;background:transparent}
body{font-family:var(--font-sans)}
@keyframes vdrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}