/* Dynamic Theme Colors - Generated from Site Settings */
:root {
  --primary: #B46490;
  --primary-hover: #C9A0DC;
  --secondary: #5A3C59;
  --bg: #FFFFFF;
  --text: #3A2A4A;
  --accent: #FFD4B8;
  --border: #3A2A4A;
  --button-text: #FFFFFF;
  --header-text: #5A3C59;
  --nav-font: #000000;
  
  /* Search & Filter (Light) */
  --search-bg: #FFFFFF;
  --search-text: #3A2A4A;
  --search-icon: #3A2A4A;
  --filter-bg: #FFFFFF;
  --filter-text: #3A2A4A;
  --filter-icon: #3A2A4A;

  /* Favorites (Light) */
  --favorites-bg: #FFFFFF;
  --favorites-stroke: #3A2A4A;
  --favorites-icon: #FF0000;

  /* Subscribe Button (Light) */
  --subscribe-bg: #b46490;
  --subscribe-text: #ffffff;
  --subscribe-icon: #000000;

  /* CTA Colors (Light) */
  --cta-purchase-bg: #8080FF;
  --cta-purchase-text: #3A2A4A;
  --cta-membership-bg: #8080FF;
  --cta-membership-text: #3A2A4A;
  --cta-login-bg: #8080FF;
  --cta-login-text: #3A2A4A;
  --cta-opacity: 0.65;
}

/* Auto-derive hover/active states */
:root {
  --primary-active: #C9A0DC;
  --card-bg: var(--bg);
  --success: #2ecc71;
  --error: #dc2626;
  --warning: #f59e0b;
}

/* Dark Mode Colors */
html.dark-mode {
  --bg: #121212;
  --dark-bg: #121212;
  --text: #FFFFFF;
  --dark-text: #FFFFFF;
  --card-bg: #1e1e1e;
  --dark-card-bg: #1e1e1e;
  --primary: #BB8686;
  --button-text: #FFFFFF;
  --header-text: #FFFFFF;
  --nav-font: #FFFFFF;
  --dark-primary: #BB8686;
  --dark-primary-hover: color-mix(in srgb, #BB8686 80%, black);
  --border: #333333;
  --dark-border: #333333;

  /* Search & Filter (Dark) */
  --search-bg: #BB8686;
  --search-text: #FFFFFF;
  --search-icon: #3A2A4A;
  --filter-bg: #BB8686;
  --filter-text: #FFFFFF;
  --filter-icon: #3A2A4A;

  /* Favorites (Dark) */
  --favorites-bg: #BB8686;
  --favorites-stroke: #3A2A4A;
  --favorites-icon: #ffffff;

  /* Subscribe Button (Dark) */
  --subscribe-bg: #bb8686;
  --subscribe-text: #ffffff;
  --subscribe-icon: #000000;

  /* CTA Colors (Dark) */
  --cta-purchase-bg: #CB3ACB;
  --cta-purchase-text: #FFFFFF;
  --cta-membership-bg: #CB3ACB;
  --cta-membership-text: #FFFFFF;
  --cta-login-bg: #CB3ACB;
  --cta-login-text: #FFFFFF;
}