/* GENERATED from web/tokens/tokens.json by tools/build-tokens.py — do not edit. */

/* Page-surface family (--bg/--panel/--text…) and glass/map family
   (--ink/--fg-ink/--panel-bg…) share this root; a surface uses one family,
   never both (UI.md § Standing rules). */
:root{
  --orange:#F5882A;
  --orange-rgb:245,136,42;
  --orange-ink:#1a0d00;
  --photo-blue:#3AA0FF;
  --bg:#0c0c0d;
  --panel:#222226;
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.18);
  --text:#ffffff;
  --sub:rgba(255,255,255,.5);
  --danger:#ff9b8a;
  --glass-rgb:12,12,13;
  --tint-hover:rgba(255,255,255,.055);
  --input-bg:rgba(255,255,255,.06);
  --ok:#8fd08a;
  --ink:8,8,9;
  --fg-ink:255,255,255;
  --text-solid:#ffffff;
  --panel-bg:rgba(15,15,16,.94);
  --panel-border:rgba(255,255,255,.10);
  --panel-border-strong:rgba(255,255,255,.18);
  --panel-sub:rgba(255,255,255,.55);
  --sheet-rgb:15,15,16;
  --scrim:6,7,9;
  --tint-1:rgba(255,255,255,.035);
  --tint-2:rgba(255,255,255,.08);
  --chk-border:rgba(255,255,255,.38);
  --success:var(--ok);
  --panel-ease:cubic-bezier(.2,.8,.2,1);
  --panel-duration:.9s;
  --release-duration:.45s;
  --fade-duration:.18s;
  --fade-ease:ease;
  --glass-chrome-blur:14px;
  --glass-chrome-bg:rgba(255,255,255,.10);
  --glass-chrome-border:rgba(255,255,255,.16);
  --glass-panel-blur:28px;
  --glass-panel-saturate:150%;
  --glass-panel-alpha:.88;
  --glass-scrim-blur:10px;
  --glass-scrim-alpha:.78;
  --radius-control:9px;
  --radius-button:10px;
  --radius-card:14px;
  --radius-sheet:18px;
  --radius-menu:16px;
  --radius-account:8px;
  --radius-pill:999px;
  --z-map:0;
  --z-overlay:5;
  --z-panel:8;
  --z-chrome:9;
  --z-menu:12;
  --z-modal:20;
  --z-banner:30;
  --edge-top:max(14px, env(safe-area-inset-top));
  --edge-right:max(14px, env(safe-area-inset-right));
  --edge-bottom:max(14px, env(safe-area-inset-bottom));
  --edge-left:max(14px, env(safe-area-inset-left));
  --edge-px:14;
  --tap-target:44px;
  --control-height:36px;
  --icon-button:28px;
  --header-icon:40px;
  --icon-stroke:1.5;
  --rail-circle:38px;
  --page-width:760px;
  --page-width-wide:1080px;
  --page-gutter:24px;
  --form-width:560px;
  --docked-panel-width:360;
  --docked-panel-width-wide:420;
  --docked-panel-alpha:0.82;
  --font-sans:-apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --size-body:13px;
  --size-sub:12px;
  --size-hint:11.5px;
  --size-label:13px;
  --size-heading:22px;
  --size-section:11px;
  --section-tracking:1.2px;
  --size-rail-label:9px;
  --field-gap-label:6px;
  --field-gap-field:18px;
  --field-focus-ring:var(--text);
  --field-padding-x:11px;
  --list-row-gap:4px;
  --list-row-padding:10px 12px;
  --list-row-radius:10px;
  --list-row-hover:var(--tint-hover);
  --list-row-divider:none;
  --door-bg:#ffffff;
  --door-text:#2E2A27;
  --door-sub:#57514F;
  --door-panel:#F6F4F1;
  --door-border:#e4e0db;
  --door-action:#1A73E8;
  --door-action-ink:#ffffff;
  --door-focus:#1a1a1a;
  --door-radius:8px;
  --door-control-height:44px;
  --door-form-width:400px;
  --console-width:1080px;
  --console-stage:720px;
  --console-nav:220px;
  --console-radius:16px;
  --console-radius-nav:12px;
  --console-radius-pill:999px;
  --console-radius-panel:20px;
  --console-control-height:48px;
  --console-ask-height:52px;
  --console-size-body:16px;
  --console-size-heading:40px;
  --console-size-mark:22px;
  --console-canvas:#050505;
  --console-bg:#000000;
  --console-elev:#141414;
  --console-text:#ececec;
  --console-sub:#8a8a8a;
  --console-border:rgba(255,255,255,.08);
  --console-quiet:rgba(255,255,255,.14);
  --console-field:#171717;
  --console-action:#ffffff;
  --console-action-ink:#000000;
  --console-action-hover:#e8e8e8;
  --console-focus:rgba(255,255,255,.72);
  --console-danger:#ff6b6b;
  --console-ok:#8fd08a;
  --console-fill:rgba(255,255,255,.07);
  --console-hover:rgba(255,255,255,.06);
  --console-nav-on:rgba(255,255,255,.10);
  --console-knob:#ffffff;
  --console-knob-on:#111111;
}

/* Page surfaces switch fully with the theme. */
:root[data-theme="light"]{
  --bg:#ffffff;
  --panel:#f2f2f2;
  --border:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.22);
  --text:#1a1a1a;
  --sub:#57514f;
  --danger:#c62f21;
  --glass-rgb:255,255,255;
  --tint-hover:rgba(0,0,0,.045);
  --input-bg:rgba(0,0,0,.04);
  --ok:#2f7a3d;
  --console-canvas:#e4e4e0;
  --console-bg:#f4f4f2;
  --console-elev:#ffffff;
  --console-text:#111111;
  --console-sub:#6a6a6a;
  --console-border:rgba(0,0,0,.08);
  --console-quiet:rgba(0,0,0,.14);
  --console-field:#ffffff;
  --console-action:#111111;
  --console-action-ink:#ffffff;
  --console-action-hover:#000000;
  --console-focus:#111111;
  --console-danger:#c62f21;
  --console-ok:#2f7a3d;
  --console-fill:rgba(0,0,0,.04);
  --console-hover:rgba(0,0,0,.045);
  --console-nav-on:rgba(0,0,0,.06);
  --console-knob:#ffffff;
  --console-knob-on:#ffffff;
}

/* Glass chrome stays fixed-dark in both themes; only a reading surface
   (card, popover, modal — anything someone reads rather than glances at)
   opts in with .surface-reading and re-pins the glass family for light. */
:root[data-theme="light"] .surface-reading{
  --ink:255,255,255;
  --fg-ink:20,20,21;
  --text-solid:#141416;
  --panel-bg:rgba(255,255,255,.98);
  --panel-border:rgba(0,0,0,.10);
  --panel-border-strong:rgba(0,0,0,.22);
  --panel-sub:#57514f;
  --sheet-rgb:255,255,255;
  --ok:#2f7a3d;
  --scrim:250,249,247;
  --tint-1:rgba(0,0,0,.03);
  --tint-2:rgba(0,0,0,.065);
  --chk-border:rgba(0,0,0,.4);
  --danger:#c62f21;
}

/* Door pages (sign-in, signup, billing) are white in both themes.
   Map chrome does not use .surface-door or --door-action. */
.surface-door{
  --bg:var(--door-bg);
  --text:var(--door-text);
  --sub:var(--door-sub);
  --panel:var(--door-panel);
  --border:var(--door-border);
  --radius-control:var(--door-radius);
  --radius-button:var(--door-radius);
  --control-height:var(--door-control-height);
  --field-focus-ring:var(--door-focus);
  --form-width:var(--door-form-width);
}

/* Staff console only. Follows the theme; dark is the default look.
   Map chrome does not use .surface-console or --console-action. */
.surface-console{
  --bg:var(--console-bg);
  --text:var(--console-text);
  --sub:var(--console-sub);
  --panel:var(--console-elev);
  --border:var(--console-border);
  --border-strong:var(--console-quiet);
  --input-bg:var(--console-field);
  --radius-control:var(--console-radius);
  --radius-button:var(--console-radius-pill);
  --radius-card:var(--console-radius-panel);
  --control-height:var(--console-control-height);
  --field-focus-ring:var(--console-focus);
  --danger:var(--console-danger);
  --ok:var(--console-ok);
  --tint-hover:var(--console-hover);
  color-scheme:dark;
}
:root[data-theme="light"] .surface-console{
  color-scheme:light;
}

@media (prefers-reduced-motion: reduce){
  :root{--panel-duration:0s;--release-duration:0s;--fade-duration:0s;}
}

/* The three frosted recipes. Nothing else writes backdrop-filter. */
.glass-chrome{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.glass-panel{
  color:var(--text-solid);
  background:rgba(var(--sheet-rgb),var(--panel-alpha,.88));
  backdrop-filter:blur(var(--panel-blur,28px)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--panel-blur,28px)) saturate(150%);
}
.glass-scrim{
  background:rgba(var(--ink),.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}