/* GENERATED by web/tools/gen.py from design/TOKENS.json: do not edit by hand */
:root {
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --s-2xs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 20px;
  --s-2xl: 24px;
  --s-3xl: 32px;
  --elev-1: 0px 6px 20px -4px rgba(16,20,38,0.18);
  --elev-2: 0px -8px 30px -6px rgba(16,20,38,0.16);
  --panel-w: 400px;
  --panel-w-tablet: 340px;
  --margin: 16px;
  --panel-r: 20px;
  --touch: 44px;
  --c-surface-base: #FFFFFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-field: #F1F3F9;
  --c-text-primary: #101426;
  --c-text-secondary: #4F566D;
  --c-text-tertiary: #626B85;
  --c-text-on-accent: #FFFFFF;
  --c-text-on-danger: #FFFFFF;
  --c-text-on-warn: #101426;
  --c-border-subtle: #E3E6EF;
  --c-accent-primary: #000F9E;
  --c-accent-cyan: #4DBBFF;
  --c-accent-soft: #E6ECFF;
  --c-brand-blue: #000F9E;
  --c-brand-night: #02062C;
  --c-traffic-free: #1A9158;
  --c-traffic-slow: #CF7000;
  --c-traffic-heavy: #E5383B;
  --c-traffic-jam: #9E1B32;
  --c-status-danger: #C62828;
  --c-status-warn: #CF7000;
  --c-status-ok: #18794C;
  --c-status-danger-banner: #C62828;
  --c-status-warn-soft: #FFF1DB;
  --c-status-danger-soft: #FDE5E6;
  --c-status-ok-soft: #DDF5E8;
  --c-overlay-scrim: #101426;
  --c-nav-banner: #000F9E;
  --c-nav-on-banner: #FFFFFF;
  --c-nav-banner-sub: #C9D5FF;
  --c-nav-arrow: #4DBBFF;
  --c-sign-white: #FFFFFF;
  --c-sign-ink: #101426;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-surface-base: #171C2E;
    --c-surface-raised: #1F2540;
    --c-surface-field: #262D4A;
    --c-text-primary: #F2F4FF;
    --c-text-secondary: #BCC3E0;
    --c-text-tertiary: #939BBE;
    --c-text-on-accent: #02062C;
    --c-text-on-danger: #101426;
    --c-text-on-warn: #101426;
    --c-border-subtle: #2D3556;
    --c-accent-primary: #4DBBFF;
    --c-accent-cyan: #4DBBFF;
    --c-accent-soft: #222C66;
    --c-brand-blue: #000F9E;
    --c-brand-night: #02062C;
    --c-traffic-free: #34C47E;
    --c-traffic-slow: #FFAE3D;
    --c-traffic-heavy: #FF5A5D;
    --c-traffic-jam: #C72A4A;
    --c-status-danger: #FF5A5D;
    --c-status-warn: #FFAE3D;
    --c-status-ok: #34C47E;
    --c-status-danger-banner: #C72A4A;
    --c-status-warn-soft: #3A2C14;
    --c-status-danger-soft: #3B1B24;
    --c-status-ok-soft: #14322A;
    --c-overlay-scrim: #000000;
    --c-nav-banner: #1F2540;
    --c-nav-on-banner: #F2F4FF;
    --c-nav-banner-sub: #A9B1D1;
    --c-nav-arrow: #4DBBFF;
    --c-sign-white: #FFFFFF;
    --c-sign-ink: #101426;
  }
}
:root[data-theme='dark'] {
  --c-surface-base: #171C2E;
  --c-surface-raised: #1F2540;
  --c-surface-field: #262D4A;
  --c-text-primary: #F2F4FF;
  --c-text-secondary: #BCC3E0;
  --c-text-tertiary: #939BBE;
  --c-text-on-accent: #02062C;
  --c-text-on-danger: #101426;
  --c-text-on-warn: #101426;
  --c-border-subtle: #2D3556;
  --c-accent-primary: #4DBBFF;
  --c-accent-cyan: #4DBBFF;
  --c-accent-soft: #222C66;
  --c-brand-blue: #000F9E;
  --c-brand-night: #02062C;
  --c-traffic-free: #34C47E;
  --c-traffic-slow: #FFAE3D;
  --c-traffic-heavy: #FF5A5D;
  --c-traffic-jam: #C72A4A;
  --c-status-danger: #FF5A5D;
  --c-status-warn: #FFAE3D;
  --c-status-ok: #34C47E;
  --c-status-danger-banner: #C72A4A;
  --c-status-warn-soft: #3A2C14;
  --c-status-danger-soft: #3B1B24;
  --c-status-ok-soft: #14322A;
  --c-overlay-scrim: #000000;
  --c-nav-banner: #1F2540;
  --c-nav-on-banner: #F2F4FF;
  --c-nav-banner-sub: #A9B1D1;
  --c-nav-arrow: #4DBBFF;
  --c-sign-white: #FFFFFF;
  --c-sign-ink: #101426;
}