:root {
  --font-sans: Montserrat, sans-serif;
  --font-serif: Montserrat, sans-serif;
  --font-display: Montserrat, sans-serif;
  --userfont: Montserrat, sans-serif;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgb(0 0 0 / 0.18);
  --shadow-md: 0 12px 40px rgb(0 0 0 / 0.28);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.4);

  --header-h: 76px;
  --container: 1640px;
  --sidebar: 260px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 220ms;

  --danger: #ff3b30;
  --danger-soft: rgb(255 59 48 / 0.16);
  --success: #34c759;
  --success-soft: rgb(52 199 89 / 0.16);
  --warning: #ffd60a;
  --info: #8e8e93;
  --gold: #f5c518;
  --seat-a: #2ec4b6;
  --seat-b: #b14bff;
  --seat-c: #f5c518;
  --online: #32d74b;

  color-scheme: dark;
  --bg: #0e0e0e;
  --bg-elevated: #141414;
  --surface: #1c1c1c;
  --surface-2: #242424;
  --surface-3: #2c2c2c;
  --overlay: rgb(0 0 0 / 0.62);
  --border: #2a2a2a;
  --border-strong: #3a3a3a;
  --text: #ffffff;
  --text-muted: #9a9a9a;
  --text-subtle: #6b6b6b;
  --inverse: #0e0e0e;
  --accent: #ffffff;
  --accent-fg: #111111;
  --input-bg: #1a1a1a;
  --header-bg: rgb(14 14 14 / 0.86);
  --card-bg: #1a1a1a;
  --hero-overlay: linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.15) 40%, rgb(0 0 0 / 0.72) 100%);
  --switch-track: #3a3a3a;
  --switch-knob: #ffffff;
  --table-hover: #262626;
  --msg-in: #2e2e2e;
  --msg-out: #ffffff;
  --msg-out-fg: #111111;
  --price-pill-bg: rgb(0 0 0 / 0.45);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elevated: #f7f7f7;
  --surface: #f3f3f3;
  --surface-2: #ececec;
  --surface-3: #e4e4e4;
  --overlay: rgb(10 10 10 / 0.45);
  --border: #e6e6e6;
  --border-strong: #cfcfcf;
  --text: #111111;
  --text-muted: #666666;
  --text-subtle: #8a8a8a;
  --inverse: #ffffff;
  --accent: #111111;
  --accent-fg: #ffffff;
  --input-bg: #f5f5f5;
  --header-bg: rgb(255 255 255 / 0.86);
  --card-bg: #f4f4f4;
  --hero-overlay: linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.08) 40%, rgb(0 0 0 / 0.62) 100%);
  --switch-track: #d4d4d4;
  --switch-knob: #111111;
  --table-hover: #ececec;
  --msg-in: #ececec;
  --msg-out: #111111;
  --msg-out-fg: #ffffff;
  --price-pill-bg: rgb(0 0 0 / 0.42);
  --shadow-sm: 0 4px 16px rgb(0 0 0 / 0.06);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 24px 48px rgb(0 0 0 / 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}