:root {
  color-scheme: dark;

  --bg: #141518;
  --glow: #232535;
  --sf: rgba(156, 195, 255, 0.24);
  --sf2: rgba(255, 255, 255, 0.16);
  --bd: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(255, 255, 255, 0.08);
  --sheet: #1B1E26;
  --sheet2: #262A34;
  --pop: #2B2F3A;
  --field: rgba(0, 0, 0, 0.30);
  --seat-empty: rgba(255, 255, 255, 0.10);
  --ctl-bd: rgba(255, 255, 255, 0.36);
  --nav: rgba(30, 33, 42, 0.8);
  --btn-glass-bg: var(--acf);
  --btn-glass-ic: var(--onac);
  --nav-solid: #1E212A;
  --tx: #EDEDF0;
  --tx2: #BFC0C8;
  --tx3: #A8AAB4;
  --ac: #9CC3FF;
  --acf: #316DDD;
  --onac: #F9F9FA;
  --acs: rgba(156, 195, 255, 0.22);
  --dg: #F3A0A0;
  --dgf: #C8372D;
  --ok: #80D7B8;
  --warn: #EFBD95;
  --host: #D8C48F;
  --wait: #B1B5C2;
  --scrim: rgba(0, 0, 0, 0.4);
  --dim: rgba(0, 0, 0, 0.4);
  --on-fill: #FFFFFF;
  --google-bg: #FFFFFF;
  --google-tx: #1F1F1F;

  --av-l1: 0.42;
  --av-c1: 0.055;

  --cv-l: 0.36;
  --cv-c: 0.07;
  --cv-la: 0.8;
  --cv-ca: 0.1;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F2F2F4;
  --glow: #D4DAEC;
  --sf: rgba(43, 95, 191, 0.12);
  --sf2: rgba(25, 28, 38, 0.08);
  --bd: rgba(25, 28, 38, 0.10);
  --card-bg: rgba(255, 255, 255, 0.62);
  --sheet: #FAFBFD;
  --sheet2: #EEF0F5;
  --pop: #FDFDFE;
  --field: rgba(43, 95, 191, 0.07);
  --seat-empty: rgba(43, 95, 191, 0.11);
  --ctl-bd: #767A8F;
  --nav: rgba(248, 249, 252, 0.8);
  --btn-glass-bg: var(--acf);
  --btn-glass-ic: var(--onac);
  --nav-solid: #F7F8FB;
  --tx: #1B1C22;
  --tx2: #4C4E58;
  --tx3: #5E616C;
  --ac: #2B5FBF;
  --acs: rgba(43, 95, 191, 0.12);
  --dg: #B3261E;
  --dgf: #B3261E;
  --ok: #11694A;
  --warn: #9A4A2A;
  --host: #6E5518;
  --wait: #4A4E5C;
  --scrim: rgba(0, 0, 0, 0.4);
  --dim: rgba(0, 0, 0, 0.4);
  --on-fill: #FFFFFF;
  --google-bg: #131314;
  --google-tx: #E3E3E3;

  --av-l1: 0.90;
  --av-c1: 0.035;

  --cv-l: 0.9;
  --cv-c: 0.045;
  --cv-la: 0.45;
  --cv-ca: 0.12;
}

:root {
  --page-bg: radial-gradient(circle at 50% 100%, var(--glow) 0%, var(--bg) 30%);

  --rd-paper-bg: #F6F1E7;
  --rd-paper-tx: #2B2A28;
  --rd-night-bg: #1C1D21;
  --rd-night-tx: #D4D6DC;

  --r-badge: 10px;
  --r-ctl: 14px;
  --r-card: 16px;
  --r-sheet: 22px;
  --r-dock: 24px;
  --r-full: 9999px;

  --tap: 44px;
  --glass-blur: 14px;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --tracking-normal: 0;

  --fs-card: 17px;
  --fs-body: 16px;
  --fs-2: 14px;
  --fs-label: 13px;
  --fs-input: 16px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --focus-ring-color: var(--ac);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --z-elevated: 10;
  --z-sticky: 100;
  --z-player: 200;
  --z-overlay: 500;
  --z-toast: 1000;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms linear;
    --transition-base: 0ms linear;
  }
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  :root {
    --page-bg: radial-gradient(circle at 50% 100%,
        var(--glow) 0%,
        color-mix(in srgb, var(--glow) 88%, var(--bg)) 2.5%,
        color-mix(in srgb, var(--glow) 76%, var(--bg)) 5%,
        color-mix(in srgb, var(--glow) 65%, var(--bg)) 7.5%,
        color-mix(in srgb, var(--glow) 54%, var(--bg)) 10%,
        color-mix(in srgb, var(--glow) 45%, var(--bg)) 12.5%,
        color-mix(in srgb, var(--glow) 35%, var(--bg)) 15%,
        color-mix(in srgb, var(--glow) 27%, var(--bg)) 17.5%,
        color-mix(in srgb, var(--glow) 19%, var(--bg)) 20%,
        color-mix(in srgb, var(--glow) 12%, var(--bg)) 22.5%,
        color-mix(in srgb, var(--glow) 7%, var(--bg)) 25%,
        color-mix(in srgb, var(--glow) 2%, var(--bg)) 27.5%,
        var(--bg) 30%);
  }
}