/* Design tokens: colors, type scale, spacing. Light and dark. Change a value here and it changes on every page. */
/* Layout: one 1280px column, 12-col grid inside sections. One signature moment: the before/after flow in the hero. */
:root{
  color-scheme:light;
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --fg:#0F1218;
  --muted:#4B5260;
  --line:#DCDFE5;
  --line-strong:#0F1218;
  --accent:#2743E6;
  --on-accent:#FFFFFF;
  --accent-tint:#EDF0FF;
  --stone:#E6E8EE;
  --ok:#1E9E5A;
  --dot:#C4C9D3;
  --shadow:rgba(15,18,24,.10);
  --lens:#D1266A;
  --on-lens:#FFFFFF;

  --f-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* type scale */
  --t-hero:clamp(44px,6.3vw,92px);
  --t-h2:clamp(30px,3.1vw,44px);
  --t-h3:clamp(32px,3.3vw,48px);
  --t-h4:clamp(22px,1.9vw,26px);
  --t-lead:clamp(19px,1.55vw,22px);
  --t-body:17px;
  --t-small:15px;
  --t-label:12px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --r-lg:24px; --r-md:16px;
  --gutter:clamp(16px,4vw,56px);
}
:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0B0D11; --surface:#13161C; --fg:#F1F3F7; --muted:#A9B0BD; --line:#262A33; --line-strong:#F1F3F7;
  --accent:#8C9EFF; --on-accent:#0B0D11; --accent-tint:#1A2040; --stone:#1A1D24; --ok:#4CC38A;
  --dot:#2E3440; --shadow:rgba(0,0,0,.5); --lens:#3DF08B; --on-lens:#04140A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode]){
    color-scheme:dark;
    --bg:#0B0D11; --surface:#13161C; --fg:#F1F3F7; --muted:#A9B0BD; --line:#262A33; --line-strong:#F1F3F7;
    --accent:#8C9EFF; --on-accent:#0B0D11; --accent-tint:#1A2040; --stone:#1A1D24; --ok:#4CC38A;
  --dot:#2E3440; --shadow:rgba(0,0,0,.5); --lens:#3DF08B; --on-lens:#04140A;
  }
}