:root {
  /* Backgrounds — WHITE THEME */
  --bg-base: #FFFFFF;
  --bg-surface: #F1F8F1;
  --bg-elevated: #E8F5E9;
  --bg-overlay: rgba(255, 255, 255, 0.92);

  /* Green accent — replaces gold throughout style.css */
  --gold: #2E7D32;
  --gold-light: #43A047;
  --gold-dark: #1B5E20;
  --gold-subtle: rgba(46, 125, 50, 0.10);
  --gold-border: rgba(46, 125, 50, 0.22);

  /* Text — DARK (for white background) */
  --text-primary: #1A2A1A;
  --text-secondary: #2E4A2E;
  --text-muted: #5A7A5A;
  --text-faint: #A0BBA0;

  /* Borders */
  --border-subtle: rgba(46, 125, 50, 0.08);
  --border-medium: rgba(46, 125, 50, 0.18);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 60, 0, 0.07);
  --shadow-md: 0 8px 24px rgba(0, 60, 0, 0.10);
  --shadow-lg: 0 20px 60px rgba(0, 60, 0, 0.13);
  --shadow-gold: 0 0 40px rgba(46, 125, 50, 0.14);

  /* 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;
}