/* ============================================================
   THEMES.CSS – Theme Design Tokens (Senior UI/UX Graded)
   Two themes: [data-theme="noir"] and [data-theme="matcha"]
   ============================================================ */

/* ✦✦ NOIR MODE (Default) – Deep Warm Charcoal & Metallic Gold ✦✦ */
:root, [data-theme="noir"] {
  /* Backgrounds: Shifted from harsh #0a0a0a to deep warm charcoal for depth */
  --bg-primary:     #0D0B0A;     /* Ultra dark charcoal with warm undertone */
  --bg-secondary:   #151310;     /* Slightly lighter for cards/surfaces */
  --bg-card:        rgba(255, 255, 255, 0.03); 
  --bg-card-hover:  rgba(255, 255, 255, 0.06);
  --bg-nav:         rgba(13, 11, 10, 0.88);
  --bg-glass:       rgba(212, 175, 55, 0.04);

  /* Accents: True metallic UI golds */
  --accent-primary:  #D4AF37;    /* Classic metallic gold */
  --accent-secondary:#E8D08D;    /* Luminous soft gold for highlights */
  --accent-tertiary: #A68326;    /* Deep burnished gold */
  --accent-glow:     rgba(212, 175, 55, 0.25);
  --accent-glow2:    rgba(232, 208, 141, 0.2);

  /* Gradients: Softer blending with transparent edge transitions */
  --gradient-hero:   linear-gradient(135deg, #D4AF37 0%, #E8D08D 50%, #A68326 100%);
  --gradient-text:   linear-gradient(135deg, #E8D08D, #D4AF37, #FFF5D6);
  --gradient-card:   linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(232, 208, 141, 0.02));
  --gradient-btn:    linear-gradient(135deg, #A68326, #D4AF37);
  --gradient-btn2:   linear-gradient(135deg, #1A1713, #221F1A);

  /* Text: Softer contrast to reduce eye strain */
  --text-primary:   #EAE6DF;     /* Soft champagne white */
  --text-secondary: #B5AFA1;     /* Elegant mid-grey */
  --text-muted:     #787268;     /* Sophisticated warm grey */
  --text-on-accent: #0D0B0A;     /* High-contrast text for solid buttons */

  /* Borders: Extremely subtle */
  --border-color:   rgba(212, 175, 55, 0.12);
  --border-hover:   rgba(232, 208, 141, 0.35);
  --border-card:    rgba(255, 255, 255, 0.05);

  /* Shadows: Soft colored shadows instead of pure grey */
  --shadow-card:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-hover:   0 12px 48px rgba(212, 175, 55, 0.12);
  --shadow-btn:     0 4px 20px rgba(212, 175, 55, 0.2);
  --shadow-glow:    0 0 30px rgba(212, 175, 55, 0.2);

  /* Tag */
  --tag-bg:    rgba(212, 175, 55, 0.08);
  --tag-color: #E8D08D;
  --tag-border: rgba(212, 175, 55, 0.25);

  /* Toggle */
  --toggle-bg:    rgba(212, 175, 55, 0.15);

  /* Scrollbar */
  --scrollbar-thumb: #D4AF37;
  --scrollbar-track: #151310;

  /* Cursor */
  --cursor-dot:   #E8D08D;
  --cursor-ring:  rgba(212, 175, 55, 0.35);
}

/* ✦✦ MATCHA MODE – Organic Soft Sage & Off-White ✦✦ */
[data-theme="matcha"] {
  /* Backgrounds: Editorial warm off-white */
  --bg-primary:     #F9F8F6;
  --bg-secondary:   #F0EFEA;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FFFFFF;
  --bg-nav:         rgba(249, 248, 246, 0.94);
  --bg-glass:       rgba(59, 91, 71, 0.05);

  /* Accents: Organic matcha and sage greens */
  --accent-primary:  #3B5B47;    /* Deep sage green */
  --accent-secondary:#588167;    /* Soft matcha */
  --accent-tertiary: #84A991;    /* Light dusty green */
  --accent-glow:     rgba(59, 91, 71, 0.18);
  --accent-glow2:    rgba(88, 129, 103, 0.22);

  /* Gradients */
  --gradient-hero:   linear-gradient(135deg, #2D4736 0%, #3B5B47 50%, #588167 100%);
  --gradient-text:   linear-gradient(135deg, #1C241E, #3B5B47, #588167);
  --gradient-card:   linear-gradient(135deg, rgba(59, 91, 71, 0.06), rgba(88, 129, 103, 0.02));
  --gradient-btn:    linear-gradient(135deg, #2D4736, #3B5B47);
  --gradient-btn2:   linear-gradient(135deg, #EBE9E1, #F4F3ED);

  /* Text: Deep forest-grey instead of harsh black */
  --text-primary:   #1A241E;     
  --text-secondary: #4A5D50;     
  --text-muted:     #7E9283;     
  --text-on-accent: #FFFFFF;     

  /* Borders: Very delicate for a clean editorial look */
  --border-color:   rgba(59, 91, 71, 0.18);
  --border-hover:   rgba(59, 91, 71, 0.38);
  --border-card:    rgba(59, 91, 71, 0.1);

  /* Shadows: Soft, airy shadows */
  --shadow-card:    0 8px 30px rgba(28, 36, 30, 0.07), 0 2px 8px rgba(28, 36, 30, 0.04);
  --shadow-hover:   0 14px 44px rgba(59, 91, 71, 0.16);
  --shadow-btn:     0 4px 18px rgba(59, 91, 71, 0.28);
  --shadow-glow:    0 0 30px rgba(59, 91, 71, 0.2);

  /* Tag */
  --tag-bg:    rgba(59, 91, 71, 0.09);
  --tag-color: #2D4736;
  --tag-border: rgba(59, 91, 71, 0.25);

  /* Toggle */
  --toggle-bg:    rgba(59, 91, 71, 0.12);

  /* Scrollbar */
  --scrollbar-thumb: #588167;
  --scrollbar-track: #F0EFEA;

  /* Cursor */
  --cursor-dot:   #3B5B47;
  --cursor-ring:  rgba(59, 91, 71, 0.35);
}

/* ✦✦ SPIDEY MODE – Milano Red & Lemon Chiffon ✦✦ */
[data-theme="spidey"] {
  /* Backgrounds: Warm Lemon Chiffon & Crisp White Card Surfaces */
  --bg-primary:     #FFFBD4;
  --bg-secondary:   #F6F1C6;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FFFFFF;
  --bg-nav:         rgba(255, 251, 212, 0.94);
  --bg-glass:       rgba(185, 28, 28, 0.05);

  /* Accents: Milano Red & Spidey Web Navy Blue */
  --accent-primary:  #B91C1C;    /* Rich Milano Red */
  --accent-secondary:#1E3A8A;    /* Classic Spidey Navy Blue */
  --accent-tertiary: #991B1B;    /* Deep Crimson */
  --accent-glow:     rgba(185, 28, 28, 0.16);
  --accent-glow2:    rgba(30, 58, 138, 0.18);

  /* Gradients */
  --gradient-hero:   linear-gradient(135deg, #B91C1C 0%, #1E3A8A 100%);
  --gradient-text:   linear-gradient(135deg, #1E3A8A, #B91C1C, #1E3A8A);
  --gradient-card:   linear-gradient(135deg, rgba(185, 28, 28, 0.05), rgba(30, 58, 138, 0.03));
  --gradient-btn:    linear-gradient(135deg, #991B1B, #B91C1C);
  --gradient-btn2:   linear-gradient(135deg, #F0EAC1, #FFFBD4);

  /* Text: High-contrast rich charcoal for effortless readability */
  --text-primary:   #18181B;     
  --text-secondary: #3F3F46;     
  --text-muted:     #71717A;     
  --text-on-accent: #FFFFFF;     

  /* Borders: Refined Red and Navy tints */
  --border-color:   rgba(185, 28, 28, 0.18);
  --border-hover:   rgba(185, 28, 28, 0.4);
  --border-card:    rgba(185, 28, 28, 0.1);

  /* Shadows: Soft colored shadows with depth */
  --shadow-card:    0 8px 30px rgba(185, 28, 28, 0.07), 0 2px 8px rgba(30, 58, 138, 0.05);
  --shadow-hover:   0 14px 44px rgba(185, 28, 28, 0.16);
  --shadow-btn:     0 4px 18px rgba(185, 28, 28, 0.3);
  --shadow-glow:    0 0 30px rgba(185, 28, 28, 0.18);

  /* Tag */
  --tag-bg:         rgba(30, 58, 138, 0.08);
  --tag-color:      #1E3A8A;
  --tag-border:     rgba(30, 58, 138, 0.22);

  /* Toggle & Scroller */
  --toggle-bg:      rgba(185, 28, 28, 0.12);
  --scrollbar-thumb: #B91C1C;
  --scrollbar-track: #F6F1C6;
  
  /* Cursor */
  --cursor-dot:     #B91C1C;
  --cursor-ring:    rgba(185, 28, 28, 0.35);
}