/* ============================================ */
/* Design Tokens — Light / Dark Theme System    */
/* ============================================ */

/* === Shared Tokens (theme-independent) === */
:root {
  /* Typography */
  --font-primary: 'Roboto', 'Noto Sans TC', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  --fz-xxl: 28px;
  --fz-xl: 24px;
  --fz-lg: 20px;
  --fz-md: 16px;
  --fz-sm: 14px;

  /* Spacing */
  --section-padding: 64px;
  --card-padding: 24px;
  --content-max-width: 1200px;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-round: 9999px;

  /* Motion */
  --transition-speed: 0.2s;
  --transition-timing: ease;
  --hover-lift: -2px;

  /* Semantic Colors (shared) */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;
  --color-discord: #5865F2;

  /* Leaderboard — semantic (shared) */
  --color-gold: #f59e0b;
  --color-silver: #94a3b8;
  --color-bronze: #d97706;
}

/* === Dark Theme (default) === */
:root,
[data-theme="dark"] {
  --bg-primary: #111318;
  --bg-secondary: #1a1d24;
  --bg-card: #21242d;
  --bg-card-hover: #282c37;
  --bg-elevated: #2e323e;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --border-color: #2e323e;
  --border-color-subtle: #252830;

  --text-primary: #e8e8ed;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-subtle: rgba(59, 130, 246, 0.1);
  --accent-text: #60a5fa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);

  --scrollbar-track: var(--bg-secondary);
  --scrollbar-thumb: var(--border-color);
  --scrollbar-thumb-hover: #4b5563;

  /* Hero overlay */
  --hero-static-bg: rgba(3, 4, 8, 0.6);
  --hero-gradient-mid: rgba(3, 4, 8, 0.5);
  --hero-gradient-mid-strong: rgba(3, 4, 8, 0.7);
  --hero-video-brightness: 0.6;

  /* Misc surfaces */
  --surface-tint: rgba(255, 255, 255, 0.03);
  --surface-tint-hover: rgba(255, 255, 255, 0.04);
  --surface-border-subtle: rgba(255, 255, 255, 0.035);
  --divider-color: rgba(255, 255, 255, 0.05);
  --divider-color-strong: #333;

  /* Interactive contrast */
  --text-on-dark: #fff;
  --btn-neutral-bg: rgba(255, 255, 255, 0.1);
  --btn-neutral-bg-hover: rgba(255, 255, 255, 0.2);
  --slider-track: rgba(255, 255, 255, 0.2);
  --input-dark-bg: rgba(0, 0, 0, 0.3);
  --select-option-bg: #1a1c29;

  /* Leaderboard specific */
  --podium-silver-name: #E0E0E0;
  --podium-silver-value: #D0D0D0;
}

/* === Light Theme === */
[data-theme="light"] {
  --bg-primary: #f5f6f8;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f4f6;
  --bg-elevated: #f0f1f3;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  --border-color: #e0e2e8;
  --border-color-subtle: #ebedf0;

  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-subtle: rgba(37, 99, 235, 0.08);
  --accent-text: #2563eb;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  --scrollbar-track: #f0f1f3;
  --scrollbar-thumb: #c5c8ce;
  --scrollbar-thumb-hover: #a0a4ab;

  /* Hero overlay — light mode keeps video dark for readability */
  --hero-static-bg: rgba(255, 255, 255, 0.35);
  --hero-gradient-mid: rgba(245, 246, 248, 0.55);
  --hero-gradient-mid-strong: rgba(245, 246, 248, 0.75);
  --hero-video-brightness: 0.85;

  /* Misc surfaces */
  --surface-tint: rgba(0, 0, 0, 0.02);
  --surface-tint-hover: rgba(0, 0, 0, 0.03);
  --surface-border-subtle: rgba(0, 0, 0, 0.06);
  --divider-color: rgba(0, 0, 0, 0.06);
  --divider-color-strong: #d1d5db;

  /* Interactive contrast */
  --text-on-dark: #fff;
  --btn-neutral-bg: rgba(0, 0, 0, 0.06);
  --btn-neutral-bg-hover: rgba(0, 0, 0, 0.1);
  --slider-track: rgba(0, 0, 0, 0.15);
  --input-dark-bg: var(--bg-primary);
  --select-option-bg: #ffffff;

  /* Leaderboard specific */
  --podium-silver-name: #6b7280;
  --podium-silver-value: #6b7280;
}

/* === Legacy Variable Aliases (for gradual migration) === */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --primary-color: var(--accent);
  --secondary-color: var(--accent-hover);
  --accent-color: var(--color-success);
  --dark-bg: var(--bg-primary);
  --content-bg: var(--bg-secondary);
  --card-bg: var(--bg-card);
  --card-bg-hover: var(--bg-card-hover);
  --text-color: var(--text-primary);
  --error-color: var(--color-error);
  --gradient-primary: var(--accent);
  --font-pixel: 'Press Start 2P', monospace;
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
}