:root {
  /* ═══════════════════════════════════════════════════════════════════
     DEFAULT: Calm Minimalist Velvet Theme
     ═══════════════════════════════════════════════════════════════════ */
  --bg-primary: #FFFFFF;
  --bg-card: #F9FAFB;
  --bg-darker: #F3F4F6;
  
  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  
  --mint: #7AE2CF;
  --mint-dark: #14b8a6;
  --black: #000000;
  --white: #FFFFFF;
  
  --border-color: #E5E7EB;
  --accent: #14b8a6;
  --accent-hover: #0f766e;
  
  /* Calm uses a soft, rounded heading font */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --font-accent: 'Kalam', cursive;
  
  --transition-smooth: all 0.4s ease;
  
  /* Component variables */
  --btn-bg: transparent;
  --btn-border: var(--mint-dark);
  --btn-text: var(--mint-dark);
  --btn-hover-bg: var(--mint-dark);
  --btn-hover-text: var(--white);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --card-border: 1px solid var(--border-color);
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --card-radius: 12px;
  
  /* Velvet-specific extras */
  --velvet-glow: 0 0 60px rgba(122, 226, 207, 0.08);
  --velvet-gradient: linear-gradient(135deg, rgba(122, 226, 207, 0.06) 0%, rgba(255,255,255,0) 60%);
}

body.theme-rustic {
  /* ═══════════════════════════════════════════════════════════════════
     INVERTOR: Dark Brutalist Rustic Theme
     ═══════════════════════════════════════════════════════════════════ */
  --bg-primary: #0A0A0A;
  --bg-card: #111111;
  --bg-darker: #000000;
  
  --text-primary: #7AE2CF;
  --text-secondary: rgba(122, 226, 207, 0.85);
  --text-muted: rgba(122, 226, 207, 0.5);
  
  --border-color: rgba(122, 226, 207, 0.4);
  --accent: #7AE2CF;
  --accent-hover: #FFFFFF;

  /* Rustic uses aggressive brutalist heading font */
  --font-heading: 'Black Ops One', 'Impact', sans-serif;

  --btn-bg: transparent;
  --btn-border: var(--mint);
  --btn-text: var(--mint);
  --btn-hover-bg: var(--mint);
  --btn-hover-text: var(--black);
  --nav-bg: rgba(10, 10, 10, 0.95);
  --card-border: 1.5px solid rgba(122, 226, 207, 0.5);
  --card-shadow: none;
  --card-radius: 4px;
  
  --velvet-glow: none;
  --velvet-gradient: none;
}