/* ============================================
   theme.css — Light / Dark CSS Variables
   ============================================ */

/* --- Light Theme (default) --- */
[data-theme="light"] {
   --color-primary:    #9d8cdf;
  --color-accent:     #7b84cc;
  --color-highlight:  #7a9bbf;
  --color-bg:         #12111f;
  --color-bg-alt:     #1c1b30;
  --color-secondary:  #3b2e4a;

  --color-text:       #e8e0f5;
  --color-text-muted: #9990b8;
  --color-heading:    #f0eaff;

  --color-nav-bg:     #1c1b30;
  --color-nav-text:   #e8e0f5;
  --color-nav-hover:  #9d8cdf;
  --color-nav-border: #2e2b45;

  --color-footer-bg:  #0d0c1a;
  --color-footer-text: #c8b6ff;
  --color-footer-link: rgba(200, 182, 255, 0.65);
  --color-footer-tagline: rgba(200, 182, 255, 0.5);
  --color-footer-bottom: rgba(200, 182, 255, 0.35);
  --color-footer-divider: rgba(255, 255, 255, 0.08);
  --color-footer-social-bg: rgba(255, 255, 255, 0.08);
  --color-footer-social-border: rgba(255, 255, 255, 0.12);

  --color-carousel-heading: #F5F0FF;
  --color-carousel-sub:     #DDD6FE;

  --color-card-bg:    #1c1b30;
  --color-card-shadow: rgba(0, 0, 0, 0.35);

  --color-border:     #2e2b45;
  --color-divider:    #2e2b45;

  --color-btn-bg:     #9d8cdf;
  --color-btn-text:   #12111f;
  --color-btn-hover:  #7b84cc;

  /* Dark-band sections (hero, CTA — always inverted) */
  --color-dark-band:       #080611;
  --color-dark-band-mid:   #1e1250;
  --color-dark-band-text:  #f0eaff;
  --color-dark-band-muted: rgba(200, 182, 255, 0.65);
  --color-dark-band-faint: rgba(192, 132, 252, 0.12);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --transition: 0.3s ease;
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  --color-primary:    #9d8cdf;
  --color-accent:     #7b84cc;
  --color-highlight:  #7a9bbf;
  --color-bg:         #12111f;
  --color-bg-alt:     #1c1b30;
  --color-secondary:  #3b2e4a;

  --color-text:       #e8e0f5;
  --color-text-muted: #9990b8;
  --color-heading:    #f0eaff;

  --color-nav-bg:     #1c1b30;
  --color-nav-text:   #e8e0f5;
  --color-nav-hover:  #9d8cdf;
  --color-nav-border: #2e2b45;

  --color-footer-bg:  #0d0c1a;
  --color-footer-text: #c8b6ff;
  --color-footer-link: rgba(200, 182, 255, 0.65);
  --color-footer-tagline: rgba(200, 182, 255, 0.5);
  --color-footer-bottom: rgba(200, 182, 255, 0.35);
  --color-footer-divider: rgba(255, 255, 255, 0.08);
  --color-footer-social-bg: rgba(255, 255, 255, 0.08);
  --color-footer-social-border: rgba(255, 255, 255, 0.12);

  --color-carousel-heading: #F5F0FF;
  --color-carousel-sub:     #DDD6FE;

  --color-card-bg:    #1c1b30;
  --color-card-shadow: rgba(0, 0, 0, 0.35);

  --color-border:     #2e2b45;
  --color-divider:    #2e2b45;

  --color-btn-bg:     #9d8cdf;
  --color-btn-text:   #12111f;
  --color-btn-hover:  #7b84cc;

  /* Dark-band sections (hero, CTA — always inverted) */
  --color-dark-band:       #080611;
  --color-dark-band-mid:   #1e1250;
  --color-dark-band-text:  #f0eaff;
  --color-dark-band-muted: rgba(200, 182, 255, 0.65);
  --color-dark-band-faint: rgba(192, 132, 252, 0.12);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --transition: 0.3s ease;
}