:root {
  --eco-graphite: #606062;
  --eco-orange: #F07335;
  --eco-cream: #F2EBDF;
  --eco-silver: #E6E7E8;

  --bg-deep: #0a0b0c;
  --bg-panel: #121416;
  --bg-elevated: #1a1c1f;
  --bg-glass: rgba(26, 28, 31, 0.72);
  --bg-glass-light: rgba(242, 235, 223, 0.06);

  --text-primary: #f8f7f5;
  --text-secondary: rgba(248, 247, 245, 0.62);
  --text-muted: rgba(248, 247, 245, 0.38);

  --accent: #F07335;
  --accent-glow: rgba(240, 115, 53, 0.35);
  --accent-soft: rgba(240, 115, 53, 0.12);
  --success: #3dd68c;
  --water: #4fc3f7;
  --co2: #81c784;
  --energy: #ffb74d;
  --trees: #66bb6a;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 40px var(--accent-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.04);

  --font-display: 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-normal: 320ms;
  --dur-slow: 520ms;

  --nav-height: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --surface-0: var(--bg-deep);
  --surface-1: var(--bg-panel);
  --surface-2: var(--bg-elevated);
  --surface-glass: var(--bg-glass);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-glow: rgba(240, 115, 53, 0.25);
  --gradient-brand: linear-gradient(135deg, #f07335 0%, #e85a1a 55%, #c94e12 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  --glow-soft: 0 0 48px rgba(240, 115, 53, 0.18);
}

[data-theme="light"] {
  --bg-deep: #e8e9ea;
  --bg-panel: #ffffff;
  --bg-elevated: #f2ebdf;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --text-primary: #606062;
  --text-secondary: rgba(96, 96, 98, 0.78);
  --text-muted: rgba(96, 96, 98, 0.48);
  --border-subtle: rgba(96, 96, 98, 0.1);
  --shadow-soft: 0 8px 32px rgba(96, 96, 98, 0.12);
  --shadow-card: 0 4px 20px rgba(96, 96, 98, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  --glow-soft: 0 0 40px rgba(240, 115, 53, 0.14);
}