@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Quicksand:wght@600;700&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

:root {
  color-scheme: light dark;
  --font-main: 'Quicksand', 'Nunito', 'Zen Maru Gothic', 'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vehicle-tap-size: 64px;

  --bg-base: #FAF9F6;
  --bg-warm: #FDFBF7;
  --bg-surface: #FFFFFF;
  --bg-surface-translucent: rgba(255, 255, 255, 0.94);
  --bg-card: #FFFFFF;
  --bg-card-subtle: #F2EFE9;
  --page-background-mid: #F4F1EA;
  --deep-obsidian: #FAF9F6;

  --border-subtle: rgba(45, 49, 66, 0.08);
  --border-medium: rgba(45, 49, 66, 0.14);
  --glass-line: rgba(45, 49, 66, 0.08);
  --grid-line: rgba(45, 49, 66, 0.04);

  --text-primary: #2D3142;
  --text-muted: #6B758E;
  --text-light: #9DA6B8;
  --zone-text: #2D3142;

  --badge-bg: rgba(77, 171, 247, 0.12);
  --badge-border: rgba(77, 171, 247, 0.28);
  --badge-text: #1971C2;

  --portal-accent: #20C997;
  --portal-accent-soft: rgba(32, 201, 151, 0.14);
  --portal-glow: rgba(32, 201, 151, 0.25);

  --accent-pink: #FF6B6B;
  --accent-pink-soft: #FFE3E3;
  --accent-pink-glow: rgba(255, 107, 107, 0.28);
  --accent-yellow: #FFB300;
  --accent-yellow-soft: #FFF3D6;
  --accent-yellow-glow: rgba(255, 179, 0, 0.28);
  --accent-mint: #20C997;
  --accent-mint-soft: #D3F9E8;
  --accent-mint-glow: rgba(32, 201, 151, 0.28);
  --accent-blue: #4DABF7;
  --accent-blue-soft: #D0EBFF;
  --accent-blue-glow: rgba(77, 171, 247, 0.28);
  --accent-coral: #FF7675;
  --accent-coral-soft: #FFE8E8;
  --accent-purple: #845EF7;
  --accent-purple-soft: #E5DBFF;

  --cobalt-blue: #4DABF7;
  --crimson-red: #FF6B6B;
  --cyber-amber: #FFB300;
  --acid-emerald: #20C997;

  --hud-surface: rgba(255, 255, 255, 0.96);
  --hud-border: rgba(45, 49, 66, 0.1);
  --hud-accent: #FF6B6B;

  --page-glow-blue: rgba(77, 171, 247, 0.22);
  --page-glow-red: rgba(255, 107, 107, 0.2);
  --page-glow-yellow: rgba(255, 192, 67, 0.2);

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  --shadow-soft: 0 8px 24px rgba(45, 49, 66, 0.06);
  --shadow-card: 0 12px 32px rgba(45, 49, 66, 0.08);
  --shadow-hover: 0 18px 40px rgba(45, 49, 66, 0.14);
  --shadow-float: 0 24px 50px rgba(45, 49, 66, 0.14);

  --zone-left-bg: radial-gradient(circle at 50% 45%, #E7F5FF 0%, #D0EBFF 70%, #C5E4FC 100%);
  --zone-right-bg: radial-gradient(circle at 50% 45%, #FFF0F0 0%, #FFE3E3 70%, #FDD7D7 100%);
  --arena-bg: #FFFDF9;
  --rope-color: #FFE066;
  --rope-mark-color: #FAB005;

  --pad-bg-idle: linear-gradient(135deg, #E7F5FF 0%, #D0EBFF 100%);
  --pad-bg-waiting: linear-gradient(135deg, #FFF9DB 0%, #FFF3BF 100%);
  --pad-bg-active: linear-gradient(135deg, #D3F9E8 0%, #A9F5D0 100%);
  --pad-bg-error: linear-gradient(135deg, #FFE3E3 0%, #FFC9C9 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #1A1D2D;
    --bg-warm: #1F2336;
    --bg-surface: #272B3F;
    --bg-surface-translucent: rgba(39, 43, 63, 0.94);
    --bg-card: #272B3F;
    --bg-card-subtle: #30354D;
    --page-background-mid: #1F2336;
    --deep-obsidian: #1A1D2D;

    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.18);
    --glass-line: rgba(255, 255, 255, 0.1);
    --grid-line: rgba(255, 255, 255, 0.05);

    --text-primary: #FFFFFF;
    --text-muted: #A6B0C3;
    --text-light: #7E89A0;
    --zone-text: #FFFFFF;

    --badge-bg: rgba(92, 184, 255, 0.18);
    --badge-border: rgba(92, 184, 255, 0.4);
    --badge-text: #74C0FC;

    --portal-accent: #38D9A9;
    --portal-accent-soft: rgba(56, 217, 169, 0.2);
    --portal-glow: rgba(56, 217, 169, 0.35);

    --accent-pink: #FF8585;
    --accent-pink-soft: rgba(255, 133, 133, 0.2);
    --accent-pink-glow: rgba(255, 133, 133, 0.35);
    --accent-yellow: #FFD43B;
    --accent-yellow-soft: rgba(255, 212, 59, 0.2);
    --accent-yellow-glow: rgba(255, 212, 59, 0.35);
    --accent-mint: #38D9A9;
    --accent-mint-soft: rgba(56, 217, 169, 0.2);
    --accent-mint-glow: rgba(56, 217, 169, 0.35);
    --accent-blue: #5CB8FF;
    --accent-blue-soft: rgba(92, 184, 255, 0.2);
    --accent-blue-glow: rgba(92, 184, 255, 0.35);
    --accent-coral: #FF9292;
    --accent-coral-soft: rgba(255, 146, 146, 0.2);
    --accent-purple: #B197FC;
    --accent-purple-soft: rgba(177, 151, 252, 0.2);

    --cobalt-blue: #5CB8FF;
    --crimson-red: #FF8585;
    --cyber-amber: #FFD43B;
    --acid-emerald: #38D9A9;

    --hud-surface: rgba(39, 43, 63, 0.96);
    --hud-border: rgba(255, 255, 255, 0.16);
    --hud-accent: #FFD43B;

    --page-glow-blue: rgba(92, 184, 255, 0.25);
    --page-glow-red: rgba(255, 133, 133, 0.22);
    --page-glow-yellow: rgba(255, 212, 59, 0.2);

    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.28);
    --shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 26px 56px rgba(0, 0, 0, 0.45);

    --zone-left-bg: radial-gradient(circle at 50% 45%, #233550 0%, #1A283D 70%, #152031 100%);
    --zone-right-bg: radial-gradient(circle at 50% 45%, #4A2630 0%, #3B1E26 70%, #2E161D 100%);
    --arena-bg: #212538;
    --rope-color: #E5B83B;
    --rope-mark-color: #F59F00;

    --pad-bg-idle: linear-gradient(135deg, #24354C 0%, #1B293C 100%);
    --pad-bg-waiting: linear-gradient(135deg, #4A3E1F 0%, #382F16 100%);
    --pad-bg-active: linear-gradient(135deg, #1C4A3A 0%, #15372B 100%);
    --pad-bg-error: linear-gradient(135deg, #4E2325 0%, #3B1A1C 100%);
  }
}