:root {
  /* Backgrounds */
  --bg-base: #08090D;
  --bg-surface: #111318;
  --bg-elevated: #1A1D26;
  --bg-overlay: rgba(8, 9, 13, 0.85);

  /* Gold accent */
  --gold: #C9A84C;
  --gold-light: #E8C870;
  --gold-dark: #9A7A30;
  --gold-subtle: rgba(201, 168, 76, 0.12);
  --gold-border: rgba(201, 168, 76, 0.25);

  /* Text */
  --text-primary: #F0F2F5;
  --text-secondary: #C8D0DC;
  --text-muted: #8896A8;
  --text-faint: #4A5568;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 40px rgba(201, 168, 76, 0.15);

  /* Typography */
  --font-sans: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
  --font-display: 'Inter', 'Noto Sans TC', system-ui, sans-serif;

  /* Sizes */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Spacing */
  --section-padding: clamp(60px, 10vw, 120px);
  --container-max: 1200px;
  --container-padding: clamp(20px, 5vw, 60px);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}