/* ==========================================================================
   Color Themes
   Reusable color theme classes for backgrounds, text, and buttons.
   Apply these classes to containers to automatically style child elements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light themes - dark text on light backgrounds
   Use: primary-light, secondary-light, tertiary-light, primary-accent-light,
        secondary-accent-light, tertiary-accent-light, secondary, tertiary,
        primary-accent, or no background (white)
   -------------------------------------------------------------------------- */

.theme-light,
.theme-white {
  --theme-bg: var(--color-white);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-primary-light {
  --theme-bg: var(--color-primary-light);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-secondary-light {
  --theme-bg: var(--color-secondary-light);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-tertiary-light {
  --theme-bg: var(--color-tertiary-light);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-primary-accent-light {
  --theme-bg: var(--color-primary-accent-light);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-secondary-accent-light {
  --theme-bg: var(--color-secondary-accent-light);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-tertiary-accent-light {
  --theme-bg: var(--color-tertiary-accent-light);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

/* Full-strength colors that need dark text */
.theme-secondary {
  --theme-bg: var(--color-secondary);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-tertiary {
  --theme-bg: var(--color-tertiary);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-primary-accent {
  --theme-bg: var(--color-primary-accent);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   Dark themes - white text on dark backgrounds
   Use: primary, secondary-accent (punainen), tertiary-accent (oranssi)
   -------------------------------------------------------------------------- */

.theme-primary {
  --theme-bg: var(--color-primary);
  --theme-text: var(--color-white);
  --theme-heading: var(--color-white);
  --theme-link: var(--color-white);
  --theme-link-hover: rgba(255, 255, 255, 0.8);
  --theme-btn-bg: var(--color-white);
  --theme-btn-text: var(--color-primary);
  --theme-btn-hover-bg: var(--color-gray-200);
}

.theme-secondary-accent {
  --theme-bg: var(--color-secondary-accent);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

.theme-tertiary-accent {
  --theme-bg: var(--color-tertiary-accent);
  --theme-text: var(--color-black);
  --theme-heading: var(--color-primary);
  --theme-link: var(--color-primary);
  --theme-link-hover: var(--color-primary-dark);
  --theme-btn-bg: var(--color-primary);
  --theme-btn-text: var(--color-white);
  --theme-btn-hover-bg: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   Theme application - apply theme variables to child elements
   -------------------------------------------------------------------------- */

[class*="theme-"] {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

[class*="theme-"] h1,
[class*="theme-"] h2,
[class*="theme-"] h3,
[class*="theme-"] h4,
[class*="theme-"] h5,
[class*="theme-"] h6 {
  color: var(--theme-heading);
}

[class*="theme-"] a:not(.btn) {
  color: var(--theme-link);
}

[class*="theme-"] a:not(.btn):hover {
  color: var(--theme-link-hover);
}

[class*="theme-"] p,
[class*="theme-"] li,
[class*="theme-"] .text-content,
[class*="theme-"] .text-content p,
[class*="theme-"] .text-content li,
.basic-page [class*="theme-"] .text-content p,
.basic-page [class*="theme-"] .text-content li {
  color: var(--theme-text);
}

[class*="theme-"] .text-content a,
.basic-page [class*="theme-"] .text-content a {
  color: var(--theme-link);
}

[class*="theme-"] .text-content a:hover,
.basic-page [class*="theme-"] .text-content a:hover {
  color: var(--theme-link-hover);
}

[class*="theme-"] .btn,
[class*="theme-"] .btn--primary {
  background-color: var(--theme-btn-bg);
  color: var(--theme-btn-text);
  border-color: var(--theme-btn-bg);
}

[class*="theme-"] .btn:hover,
[class*="theme-"] .btn--primary:hover {
  background-color: var(--theme-btn-hover-bg);
  border-color: var(--theme-btn-hover-bg);
  color: var(--theme-btn-text);
}

/* Secondary/outline button variant within themes */
[class*="theme-"] .btn--secondary,
[class*="theme-"] .btn--outline {
  background-color: transparent;
  color: var(--theme-btn-bg);
  border-color: var(--theme-btn-bg);
}

[class*="theme-"] .btn--secondary:hover,
[class*="theme-"] .btn--outline:hover {
  background-color: var(--theme-btn-bg);
  color: var(--theme-btn-text);
}