/*
 * =========================================
 * COLOR & THEME VARIABLES
 * =========================================
 */

/* -- Root Color Definitions -- */
:root {
  --gradient-primary: linear-gradient(90deg, #6e48aa, #9466ff);
  --gradient-primary-hover: linear-gradient(90deg, #58398a, #7a4ded);
  --bs-primary-rgb: 110, 72, 170;
  --link-color: #6e48aa;
}

/* -- Light Theme: Purple-tinted grays (Hue: 265) -- */
[data-bs-theme="light"] {
  --bs-body-bg: hsl(265, 25%, 98%);
  --bs-body-color: hsl(265, 10%, 25%);
  --bs-secondary-bg: hsl(265, 20%, 100%);
  --bs-tertiary-bg: hsl(265, 20%, 95%);
  --bs-border-color: hsl(265, 15%, 90%);
  --bs-heading-color: hsl(265, 15%, 15%);
  --header-bg: hsla(265, 25%, 98%, 0.75);
}

/*
 * =========================================
 * REFINED DARK THEME
 * =========================================
 */

/* -- Dark Theme: Deeper backgrounds and more vibrant accents -- */
[data-bs-theme="dark"] {
  --bs-body-bg: hsl(265, 10%, 8%); /* Darkened for higher contrast */
  --bs-body-color: hsl(265, 15%, 85%);
  --bs-secondary-bg: hsl(265, 10%, 12%); /* Darkened card backgrounds */
  --bs-tertiary-bg: hsl(265, 9%, 10%); /* ADJUSTED: Made the zebra-stripe darker */
  --bs-border-color: hsl(265, 8%, 22%); /* Slightly adjusted border */
  --bs-heading-color: hsl(265, 20%, 97%);
  --header-bg: hsla(265, 10%, 8%, 0.75); /* Darkened header */
}


/*
 * ----------------------------------------
 * Dark Theme: Saturated Hover Effects
 * ----------------------------------------
 * These rules override the default hover effects found in main.css
 * to provide a more vibrant experience, but only for the dark theme.
 */

/* Hover for light-background elements like buttons and cards */
[data-bs-theme="dark"] .download-buttons .btn-google-play:hover,
[data-bs-theme="dark"] .hero-buttons .btn-google-play:hover,
[data-bs-theme="dark"] .feature-grid-card:hover {
    background-color: hsl(265, 25%, 16%); /* More saturated purple tint on hover */
}

/* Hover for the main pricing cards (non-popular) */
[data-bs-theme="dark"] .pricing-card:not(.popular):hover {
    border-color: hsl(265, 25%, 30%);
    background-color: hsl(265, 15%, 14%);
}