/* =========================================================
   1. COLOR PALETTE DEFINITION (GLOBAL VARIABLES)
   ========================================================= */
:root {
    /* Base Color Palette */
    --color-pink: #eb45eb;
    --color-pastel-pink: #ea93ea;
    --color-pink-light: #F5A9A7;
    --color-dark-pink: #D81B60;
    --color-orange: #EB935B;
    --color-teal: #69B8BF;
    --color-blue: #6E7B9D;
    --color-dark-blue: #0E7CF4;
    --color-light-blue: #0AA0F6;
    --color-yellow: #ffcd37;
    --color-green: #86B079;
    --color-light-green: #8BC34A;
    --color-brown: #371804;
    --color-red: #EC625F;
    --color-cyan: #28CC9E;
    --color-purple: #7B77FF;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-dark-grey: #333333;
    --color-medium-grey: #666666;
    --color-light-grey: #E5E5E5;
    
    /* Pastel Colors */
    --color-coral-pink: #FF9A9E;
    --color-mint-green: #A8E6CF;
    --color-soft-lavender: #b0b0f5;
    --color-rose-gold: #F7CAC9;
}




/* =========================================================
   2. DEFAULT THEME (Light Mode)
   ========================================================= */
:root {
    /* Primary Colors */
    --primary-color: var(--color-blue);
    --primary-hover: #5a6682;
    --secondary-color: var(--color-orange);
    --secondary-hover: #d67f47;
    
    /* Background Colors */
    --background-color: #F8F8F8;
    --background-secondary: var(--color-white);
    --background-tertiary: #F0F0F0;
    
    /* Text Colors */
    --text-color: var(--color-dark-grey);
    --text-secondary: var(--color-medium-grey);
    --heading-color: var(--color-blue);
    --contrast-text: var(--color-white);
    
    /* Button Colors */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: var(--primary-hover);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: var(--secondary-hover);
    
    /* Header & Footer */
    --header-bg: var(--color-white);
    --header-text: var(--color-dark-grey);
    --footer-bg: var(--color-dark-grey);
    --footer-text: var(--color-white);
    
    /* Borders & Dividers */
    --border-color: var(--color-light-grey);
    --divider-color: rgba(0, 0, 0, 0.1);
    
    /* Cards & Surfaces */
    --card-bg: var(--color-white);
    --card-shadow: rgba(0, 0, 0, 0.1);
    
    /* Links */
    --link-color: var(--primary-color);
    --link-hover: var(--primary-hover);
    
    /* CTA Section */
    --cta-gradient-start: var(--primary-color);
    --cta-gradient-mid: var(--secondary-color);
    --cta-gradient-end: var(--primary-color);
    --cta-text: var(--color-white);
    --cta-text-secondary: rgba(255, 255, 255, 0.9);
    --cta-button-bg: var(--color-white);
    --cta-button-text: var(--primary-color);
    --cta-link: var(--color-white);
    
    /* Button Gradient */
    --btn-gradient-start: var(--secondary-color);
    --btn-gradient-mid: var(--primary-color);
    --btn-gradient-end: var(--primary-color);
}


/* =========================================================
   3. DARK MODE BASE
   ========================================================= */
.dark {
    /* Primary Colors */
    --primary-color: #8B9DC3;
    --primary-hover: #a3b3d4;
    --secondary-color: #F5A97A;
    --secondary-hover: #f7ba91;
    
    /* Background Colors */
    --background-color: #1a1a1a;
    --background-secondary: #2a2a2a;
    --background-tertiary: #333333;
    
    /* Text Colors */
    --text-color: #E5E5E5;
    --text-secondary: #A0A0A0;
    --heading-color: #8B9DC3;
    --contrast-text: #1a1a1a;
    
    /* Button Colors */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: #1a1a1a;
    --btn-primary-hover: var(--primary-hover);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-text: #1a1a1a;
    --btn-secondary-hover: var(--secondary-hover);
    
    /* Header & Footer */
    --header-bg: #2a2a2a;
    --header-text: #E5E5E5;
    --footer-bg: #0f0f0f;
    --footer-text: #E5E5E5;
    
    /* Borders & Dividers */
    --border-color: #404040;
    --divider-color: rgba(255, 255, 255, 0.1);
    
    /* Cards & Surfaces */
    --card-bg: #2a2a2a;
    --card-shadow: rgba(0, 0, 0, 0.3);
    
    /* Links */
    --link-color: var(--primary-color);
    --link-hover: var(--primary-hover);
    
    /* CTA Section */
    --cta-gradient-start: var(--primary-color);
    --cta-gradient-mid: var(--secondary-color);
    --cta-gradient-end: var(--primary-color);
    --cta-text: var(--color-white);
    --cta-text-secondary: rgba(255, 255, 255, 0.85);
    --cta-button-bg: var(--color-white);
    --cta-button-text: var(--primary-color);
    --cta-link: rgba(255, 255, 255, 0.95);
    
    /* Button Gradient */
    --btn-gradient-start: var(--secondary-color);
    --btn-gradient-mid: var(--primary-color);
    --btn-gradient-end: var(--primary-color);
}


/* =========================================================
   4. INDIVIDUAL THEMES (Light Mode)
   ========================================================= */
/* --- Pastel Rainbow Theme --- */
.theme-pastelrainbow {
    --primary-color: var(--color-light-blue);
    --primary-hover: #6bb8d9;
    --secondary-color: var(--color-yellow);
    --secondary-hover: #fad45e;
    --tertiary-color: var(--color-orange);
    --tertiary-hover: #ffc995;
    --quaternary-color: var(--color-coral-pink);
    --quaternary-hover: #ff8a8f;
    --quinary-color: var(--color-mint-green);
    --quinary-hover: #98dcc0;
    --senary-color: var(--color-soft-lavender);
    --senary-hover: #dcdcf0;
    --septenary-color: var(--color-rose-gold);
    --septenary-hover: #f5b8b7;
    --octonary-color: var(--color-purple);
    --octonary-hover: #6b6bff;
    --nonary-color: var(--color-teal);
    --nonary-hover: #52a3aa;
    --denary-color: var(--color-green);
    --denary-hover: #6f9a64;
    --heading-color: var(--color-light-green);
    --btn-primary-bg: var(--color-light-blue);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #0880c4;
    --btn-secondary-bg: var(--color-pink);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #e08f8d;
    --link-color: var(--color-light-blue);
    --footer-bg: var(--color-brown);
    --cta-gradient-start: var(--color-light-blue);
    --cta-gradient-mid: var(--color-yellow);
    --cta-gradient-end: var(--color-orange);
    --btn-gradient-start: var(--color-yellow);
    --btn-gradient-mid: var(--color-orange);
    --btn-gradient-end: var(--color-brown);
}


.theme-pastelrainbow h3 {
    color: var(--color-pastel-pink);
}


/* --- Blue Theme --- */
.theme-blue {
    --primary-color: var(--color-blue);
    --primary-hover: #5a6682;
    --secondary-color: var(--color-pink);
    --secondary-hover: #e08f8d;
    --heading-color: var(--color-blue);
    --btn-primary-bg: var(--color-blue);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #5a6682;
    --btn-secondary-bg: var(--color-pink);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #e08f8d;
    --link-color: var(--color-blue);
    --footer-bg: var(--color-blue);
    --cta-gradient-start: var(--color-blue);
    --cta-gradient-mid: var(--color-pink);
    --cta-gradient-end: var(--color-blue);
    --btn-gradient-start: var(--color-pink);
    --btn-gradient-mid: var(--color-blue);
    --btn-gradient-end: var(--color-blue);
}


.theme-teal {
    --primary-color: var(--color-teal);
    --primary-hover: #52a3aa;
    --secondary-color: var(--color-orange);
    --secondary-hover: #d67f47;
    --background-color: #F3FBFB;
    --heading-color: var(--color-teal);
    --btn-primary-bg: var(--color-teal);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #52a3aa;
    --btn-secondary-bg: var(--color-orange);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #d67f47;
    --link-color: var(--color-teal);
    --footer-bg: var(--color-teal);
    --cta-gradient-start: var(--color-teal);
    --cta-gradient-mid: var(--color-orange);
    --cta-gradient-end: var(--color-teal);
    --btn-gradient-start: var(--color-orange);
    --btn-gradient-mid: var(--color-teal);
    --btn-gradient-end: var(--color-teal);
}


.theme-pink {
    --primary-color: var(--color-pink);
    --primary-hover: #e08f8d;
    --secondary-color: var(--color-blue);
    --secondary-hover: #5a6682;
    --heading-color: var(--color-pink);
    --btn-primary-bg: var(--color-pink);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #e08f8d;
    --btn-secondary-bg: var(--color-blue);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #5a6682;
    --link-color: var(--color-pink);
    --footer-bg: var(--color-pink);
    --cta-gradient-start: var(--color-pink);
    --cta-gradient-mid: var(--color-blue);
    --cta-gradient-end: var(--color-pink);
    --btn-gradient-start: var(--color-blue);
    --btn-gradient-mid: var(--color-pink);
    --btn-gradient-end: var(--color-pink);
}


.theme-orange {
    --primary-color: var(--color-orange);
    --primary-hover: #d67f47;
    --secondary-color: var(--color-teal);
    --secondary-hover: #52a3aa;
    --background-color: #FFFCEF;
    --heading-color: var(--color-orange);
    --btn-primary-bg: var(--color-orange);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #d67f47;
    --btn-secondary-bg: var(--color-teal);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #52a3aa;
    --link-color: var(--color-orange);
    --footer-bg: var(--color-orange);
    --cta-gradient-start: var(--color-orange);
    --cta-gradient-mid: var(--color-teal);
    --cta-gradient-end: var(--color-orange);
    --btn-gradient-start: var(--color-teal);
    --btn-gradient-mid: var(--color-orange);
    --btn-gradient-end: var(--color-orange);
}


.theme-yellow {
    --primary-color: var(--color-yellow);
    --primary-hover: #fad45e;
    --secondary-color: var(--color-green);
    --secondary-hover: #6f9a64;
    --heading-color: var(--color-brown);
    --btn-primary-bg: var(--color-yellow);
    --btn-primary-text: var(--color-dark-grey);
    --btn-primary-hover: #fad45e;
    --btn-secondary-bg: var(--color-green);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #6f9a64;
    --contrast-text: var(--color-brown);
    --link-color: var(--color-brown);
    --footer-bg: var(--color-brown);
    --cta-gradient-start: var(--color-yellow);
    --cta-gradient-mid: var(--color-green);
    --cta-gradient-end: var(--color-yellow);
    --cta-button-text: var(--color-dark-grey);
    --btn-gradient-start: var(--color-green);
    --btn-gradient-mid: var(--color-yellow);
    --btn-gradient-end: var(--color-yellow);
}


.theme-yellowpink {
    --primary-color: var(--color-yellow);
    --primary-hover: #fad45e;
    --secondary-color: var(--color-pink);
    --secondary-hover: #e08f8d;
    --heading-color: var(--color-brown);
    --btn-primary-bg: var(--color-yellow);
    --btn-primary-text: var(--color-dark-grey);
    --btn-primary-hover: #fad45e;
    --btn-secondary-bg: var(--color-pink);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #e08f8d;
    --contrast-text: var(--color-green);
    --link-color: var(--color-green);
    --footer-bg: var(--color-green);
    --cta-gradient-start: var(--color-yellow);
    --cta-gradient-mid: var(--color-light-blue);
    --cta-gradient-end: var(--color-yellow);
    --cta-button-text: var(--color-dark-grey);
}


.theme-green {
    --primary-color: var(--color-green);
    --primary-hover: #6f9a64;
    --secondary-color: var(--color-yellow);
    --secondary-hover: #fad45e;
    --background-color: #F8FFF7;
    --heading-color: var(--color-green);
    --btn-primary-bg: var(--color-green);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #6f9a64;
    --btn-secondary-bg: var(--color-yellow);
    --btn-secondary-text: var(--color-dark-grey);
    --btn-secondary-hover: #fad45e;
    --link-color: var(--color-green);
    --footer-bg: var(--color-green);
    --cta-gradient-start: var(--color-green);
    --cta-gradient-mid: var(--color-yellow);
    --cta-gradient-end: var(--color-green);
}


.theme-brown {
    --primary-color: var(--color-brown);
    --primary-hover: #8f6449;
    --secondary-color: var(--color-yellow);
    --secondary-hover: #fad45e;
    --heading-color: var(--color-brown);
    --btn-primary-bg: var(--color-brown);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #8f6449;
    --btn-secondary-bg: var(--color-yellow);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #fad45e;
    --link-color: var(--color-brown);
    --footer-bg: var(--color-brown);
    --cta-gradient-start: var(--color-brown);
    --cta-gradient-mid: var(--color-yellow);
    --cta-gradient-end: var(--color-brown);
}




.theme-darkblue {
    --primary-color: #0E7CF4;
    --primary-hover: #0a5bb8;
    --secondary-color: #8BC34A;
    --secondary-hover: #689f38;
    --heading-color: #0E7CF4;
    --btn-primary-bg: #0E7CF4;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #0a5bb8;
    --btn-secondary-bg: #8BC34A;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #689f38;
    --link-color: #0E7CF4;
    --footer-bg: #0E7CF4;
    --cta-gradient-start: #0E7CF4;
    --cta-gradient-mid: #8BC34A;
    --cta-gradient-end: #0E7CF4;
}


.theme-lightgreen {
    --primary-color: #8BC34A;
    --primary-hover: #689f38;
    --secondary-color: #0E7CF4;
    --secondary-hover: #0a5bb8;
    --heading-color: #8BC34A;
    --btn-primary-bg: #8BC34A;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #689f38;
    --btn-secondary-bg: #0E7CF4;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #0a5bb8;
    --link-color: #8BC34A;
    --footer-bg: #8BC34A;
    --cta-gradient-start: #8BC34A;
    --cta-gradient-mid: #0E7CF4;
    --cta-gradient-end: #8BC34A;
}


.theme-red {
    --primary-color: #EC625F;
    --primary-hover: #e73c37;
    --secondary-color: #28CC9E;
    --secondary-hover: #1f9a78;
    --heading-color: #EC625F;
    --btn-primary-bg: #EC625F;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #e73c37;
    --btn-secondary-bg: #28CC9E;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #1f9a78;
    --link-color: #EC625F;
    --footer-bg: #EC625F;
    --cta-gradient-start: #EC625F;
    --cta-gradient-mid: #28CC9E;
    --cta-gradient-end: #EC625F;
}


.theme-cyan {
    --primary-color: #28CC9E;
    --primary-hover: #1f9a78;
    --secondary-color: #EC625F;
    --secondary-hover: #e73c37;
    --heading-color: #28CC9E;
    --btn-primary-bg: #28CC9E;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #1f9a78;
    --btn-secondary-bg: #EC625F;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #e73c37;
    --link-color: #28CC9E;
    --footer-bg: #28CC9E;
    --cta-gradient-start: #28CC9E;
    --cta-gradient-mid: #EC625F;
    --cta-gradient-end: #28CC9E;
}


.theme-lightblue {
    --primary-color: #0AA0F6;
    --primary-hover: #0880c4;
    --secondary-color: #7B77FF;
    --secondary-hover: #5a54ff;
    --heading-color: #0AA0F6;
    --btn-primary-bg: #0AA0F6;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #0880c4;
    --btn-secondary-bg: #7B77FF;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #5a54ff;
    --link-color: #0AA0F6;
    --footer-bg: #0AA0F6;
    --cta-gradient-start: #0AA0F6;
    --cta-gradient-mid: #7B77FF;
    --cta-gradient-end: #0AA0F6;
}


.theme-purple {
    --primary-color: #7B77FF;
    --primary-hover: #5a54ff;
    --secondary-color: #0AA0F6;
    --secondary-hover: #0880c4;
    --heading-color: #7B77FF;
    --btn-primary-bg: #7B77FF;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #5a54ff;
    --btn-secondary-bg: #0AA0F6;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #0880c4;
    --link-color: #7B77FF;
    --footer-bg: #7B77FF;
    --cta-gradient-start: #7B77FF;
    --cta-gradient-mid: #0AA0F6;
    --cta-gradient-end: #7B77FF;
}

.theme-darkpink {
    --primary-color: #D81B60;
    --primary-hover: #ad1650;
    --secondary-color: #7B77FF;
    --secondary-hover: #5a54ff;
    --heading-color: #D81B60;
    --btn-primary-bg: #D81B60;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #ad1650;
    --btn-secondary-bg: #7B77FF;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #5a54ff;
    --link-color: #D81B60;
    --footer-bg: #D81B60;
    --cta-gradient-start: #D81B60;
    --cta-gradient-mid: #7B77FF;
    --cta-gradient-end: #D81B60;
}


.theme-legalblue {
    --primary-color: #87CEEB;
    --primary-hover: #6bb8d9;
    --secondary-color: #3CB371;
    --secondary-hover: #2d8a56;
    --background-color: #FFFFFF;
    --border-color: #F0F8FF;
    --text-color: #2F4F4F;
    --heading-color: #87CEEB;
    --btn-primary-bg: #87CEEB;
    --btn-primary-text: #2F4F4F;
    --btn-primary-hover: #6bb8d9;
    --btn-secondary-bg: #FFD700;
    --btn-secondary-text: #2F4F4F;
    --btn-secondary-hover: #e6c200;
    --link-color: #87CEEB;
    --footer-bg: #87CEEB;
    --cta-gradient-start: #87CEEB;
    --cta-gradient-mid: #3CB371;
    --cta-gradient-end: #87CEEB;
}




.theme-darkpastelrainbow {
    --primary-color: #5A8FC7;
    --primary-hover: #4a7bb0;
    --secondary-color: #E6C55A;
    --secondary-hover: #d9b847;
    --heading-color: #6B9E47;
    --btn-primary-bg: #0880C4;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #0670a8;
    --btn-secondary-bg: #D8758A;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #c96177;
    --link-color: #0880C4;
    --footer-bg: #6B9E47;
    --cta-gradient-start: #0880C4;
    --cta-gradient-mid: #E6C55A;
    --cta-gradient-end: #D8758A;
}

.theme-darkpastelrainbow h3 {
    color: #D8758A;
}

.theme-autumn {
    --primary-color: oklch(82.8% 0.189 84.429); /* amber-400 */
    --primary-hover: oklch(76.9% 0.188 70.08); /* amber-500 */
    --secondary-color: oklch(75% 0.183 55.934); /* orange-400 */
    --secondary-hover: oklch(70.5% 0.213 47.604); /* orange-500 */
    --tertiary-color: oklch(85.2% 0.199 91.936); /* yellow-400 */
    --tertiary-hover: oklch(79.5% 0.184 86.047); /* yellow-500 */
    --quaternary-color: oklch(71.2% 0.194 13.428); /* rose-400 */
    --quaternary-hover: oklch(64.5% 0.246 16.439); /* rose-500 */
    --quinary-color: oklch(76.8% 0.233 130.85); /* lime-500 */
    --quinary-hover: oklch(64.8% 0.2 131.684); /* lime-600 */
    --heading-color: oklch(82.8% 0.189 84.429);
    --btn-primary-bg: oklch(82.8% 0.189 84.429);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: oklch(76.9% 0.188 70.08);
    --btn-secondary-bg: oklch(75% 0.183 55.934);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: oklch(70.5% 0.213 47.604);
    --link-color: oklch(82.8% 0.189 84.429);
    --footer-bg: oklch(47.3% 0.137 46.201); /* amber-800 */
    --cta-gradient-start: oklch(82.8% 0.189 84.429);
    --cta-gradient-mid: oklch(75% 0.183 55.934);
    --cta-gradient-end: oklch(85.2% 0.199 91.936);
    --btn-gradient-start: oklch(75% 0.183 55.934);
    --btn-gradient-mid: oklch(82.8% 0.189 84.429);
    --btn-gradient-end: oklch(85.2% 0.199 91.936);
}

.theme-ezytz {
    --primary-color: #87CEEB; /* Clear Sky Blue */
    --primary-hover: #6bb8d9;
    --secondary-color: #FFD700; /* Optimistic Sunshine Yellow */
    --secondary-hover: #FFBF00; /* Gold/Orange for Warnings */
    --tertiary-color: #3CB371; /* Growth & Success Green */
    --tertiary-hover: #2d8a56;
    --quaternary-color: #A0522D; /* Grounded Earth Brown */
    --quaternary-hover: #8b4513;
    --background-color: #FFFFFF; /* Clean White */
    --background-secondary: #F0F8FF; /* Soft Light Gray */
    --text-color: #2F4F4F; /* Deep Forest Text */
    --heading-color: #2F4F4F; /* Deep Forest Text */
    --btn-primary-bg: #FFD700; /* Optimistic Sunshine Yellow */
    --btn-primary-text: #2F4F4F; /* Deep Forest Text */
    --btn-primary-hover: #FFBF00; /* Gold/Orange for Warnings */
    --btn-secondary-bg: #3CB371; /* Growth & Success Green */
    --btn-secondary-text: #FFFFFF; /* White Text */
    --btn-secondary-hover: #2d8a56;
    --link-color: #87CEEB; /* Clear Sky Blue */
    --footer-bg: #2F4F4F; /* Deep Forest Text */
    --cta-gradient-start: #87CEEB;
    --cta-gradient-mid: #FFD700;
    --cta-gradient-end: #3CB371;
    --btn-gradient-start: #FFD700;
    --btn-gradient-mid: #87CEEB;
    --btn-gradient-end: #3CB371;
}

.theme-ezytz2 {
    --primary-color: #87CEEB; /* Clear Sky Blue */
    --primary-hover: #6bb8d9;
    --secondary-color: #FFD700; /* Optimistic Sunshine Yellow */
    --secondary-hover: #FFBF00;
    --tertiary-color: #3CB371; /* Growth & Success Green */
    --tertiary-hover: #2d8a56;
    --quaternary-color: #A0522D; /* Grounded Earth Brown */
    --quaternary-hover: #8b4513;
    --quinary-color: #1E90FF; /* Dodger Blue (Glow) */
    --quinary-hover: #1873cc;
    --senary-color: #DC3545; /* Standard Warning Red */
    --senary-hover: #c82333;
    --septenary-color: #F0F8FF; /* Soft Light Gray */
    --septenary-hover: #e6f2ff;
    --octonary-color: #4169E1; /* Royal Blue */
    --octonary-hover: #3654d1;
    --nonary-color: #32CD32; /* Lime Green */
    --nonary-hover: #28a428;
    --denary-color: #DAA520; /* Goldenrod */
    --denary-hover: #b8941c;
    --background-color: #FFFFFF; /* Clean White */
    --background-secondary: #F0F8FF; /* Soft Light Gray */
    --text-color: #2F4F4F; /* Deep Forest Text */
    --heading-color: #2F4F4F; /* Deep Forest Text */
    --btn-primary-bg: #FFD700; /* Action Primary */
    --btn-primary-text: #2F4F4F; /* Deep Forest Text */
    --btn-primary-hover: #FFBF00;
    --btn-secondary-bg: #1E90FF; /* Action Secondary */
    --btn-secondary-text: #FFFFFF; /* White Text */
    --btn-secondary-hover: #1873cc;
    --link-color: #1E90FF; /* Clear Sky Blue */
    --footer-bg: #2F4F4F; /* Deep Forest Text */
    --cta-gradient-start: #87CEEB;
    --cta-gradient-mid: #FFD700;
    --cta-gradient-end: #1E90FF;
    --btn-gradient-start: #FFD700;
    --btn-gradient-mid: #1E90FF;
    --btn-gradient-end: #87CEEB;
}


/* =========================================================
   5. DARK MODE THEME OVERRIDES
   ========================================================= */

.dark.theme-blue {
    --primary-color: #8B9DC3;
    --primary-hover: #a3b3d4;
    --secondary-color: #F7BDB9;
    --secondary-hover: #f9ccc9;
    --heading-color: #8B9DC3;
    --btn-primary-bg: #8B9DC3;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #F7BDB9;
    --btn-secondary-text: #1a1a1a;
    --link-color: #8B9DC3;
    --footer-bg: #8B9DC3;
}

.dark.theme-teal {
    --primary-color: #7FCCD4;
    --primary-hover: #96d9e0;
    --secondary-color: #F5A97A;
    --secondary-hover: #f7ba91;
    --heading-color: #7FCCD4;
    --background-color: #1a1f1f;
    --btn-primary-bg: #7FCCD4;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #F5A97A;
    --btn-secondary-text: #1a1a1a;
    --link-color: #7FCCD4;
    --footer-bg: #7FCCD4;
}

.dark.theme-pink {
    --primary-color: #F7BDB9;
    --primary-hover: #f9ccc9;
    --secondary-color: #8B9DC3;
    --secondary-hover: #a3b3d4;
    --heading-color: #F7BDB9;
    --btn-primary-bg: #F7BDB9;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #8B9DC3;
    --btn-secondary-text: #1a1a1a;
    --link-color: #F7BDB9;
    --footer-bg: #F7BDB9;
}

.dark.theme-orange {
    --primary-color: #F5A97A;
    --primary-hover: #f7ba91;
    --secondary-color: #7FCCD4;
    --secondary-hover: #96d9e0;
    --heading-color: #F5A97A;
    --background-color: #1f1c18;
    --btn-primary-bg: #F5A97A;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #7FCCD4;
    --btn-secondary-text: #1a1a1a;
    --link-color: #F5A97A;
    --footer-bg: #F5A97A;
}

.dark.theme-yellow {
    --primary-color: #FCDD7C;
    --primary-hover: #fde599;
    --secondary-color: #9BC68F;
    --secondary-hover: #afd1a5;
    --heading-color: #D4A574;
    --btn-primary-bg: #FCDD7C;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #9BC68F;
    --btn-secondary-text: #1a1a1a;
    --link-color: #D4A574;
    --footer-bg: #D4A574;
}

.dark.theme-yellowpink {
    --primary-color: #FCDD7C;
    --primary-hover: #fde599;
    --secondary-color: #F7BDB9;
    --secondary-hover: #f9ccc9;
    --heading-color: #9BC68F;
    --btn-primary-bg: #FCDD7C;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #F7BDB9;
    --btn-secondary-text: #1a1a1a;
    --link-color: #9BC68F;
    --footer-bg: #9BC68F;
}

.dark.theme-green {
    --primary-color: #9BC68F;
    --primary-hover: #afd1a5;
    --secondary-color: #FCDD7C;
    --secondary-hover: #fde599;
    --heading-color: #9BC68F;
    --background-color: #1a1f1a;
    --btn-primary-bg: #9BC68F;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #FCDD7C;
    --btn-secondary-text: #1a1a1a;
    --link-color: #9BC68F;
    --footer-bg: #9BC68F;
}

.dark.theme-brown {
    --primary-color: #C0927A;
    --primary-hover: #cfa58f;
    --secondary-color: #FCDD7C;
    --secondary-hover: #fde599;
    --heading-color: #C0927A;
    --btn-primary-bg: #C0927A;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #FCDD7C;
    --btn-secondary-text: #1a1a1a;
    --link-color: #C0927A;
    --footer-bg: #C0927A;
}

.dark.theme-darkblue {
    --primary-color: #4A9BFF;
    --primary-hover: #6bb0ff;
    --secondary-color: #A8D46F;
    --secondary-hover: #b8dc85;
    --heading-color: #4A9BFF;
    --btn-primary-bg: #4A9BFF;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #A8D46F;
    --btn-secondary-text: #1a1a1a;
    --link-color: #4A9BFF;
    --footer-bg: #4A9BFF;
}

.dark.theme-lightgreen {
    --primary-color: #A8D46F;
    --primary-hover: #b8dc85;
    --secondary-color: #4A9BFF;
    --secondary-hover: #6bb0ff;
    --heading-color: #A8D46F;
    --btn-primary-bg: #A8D46F;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #4A9BFF;
    --btn-secondary-text: #1a1a1a;
    --link-color: #A8D46F;
    --footer-bg: #A8D46F;
}

.dark.theme-red {
    --primary-color: #FF7B78;
    --primary-hover: #ff9491;
    --secondary-color: #4FDDB8;
    --secondary-hover: #6fe3c5;
    --heading-color: #FF7B78;
    --btn-primary-bg: #FF7B78;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #4FDDB8;
    --btn-secondary-text: #1a1a1a;
    --link-color: #FF7B78;
    --footer-bg: #FF7B78;
}

.dark.theme-cyan {
    --primary-color: #4FDDB8;
    --primary-hover: #6fe3c5;
    --secondary-color: #FF7B78;
    --secondary-hover: #ff9491;
    --heading-color: #4FDDB8;
    --btn-primary-bg: #4FDDB8;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #FF7B78;
    --btn-secondary-text: #1a1a1a;
    --link-color: #4FDDB8;
    --footer-bg: #4FDDB8;
}

.dark.theme-lightblue {
    --primary-color: #4AB8FF;
    --primary-hover: #6bc7ff;
    --secondary-color: #9B94FF;
    --secondary-hover: #afa8ff;
    --heading-color: #4AB8FF;
    --btn-primary-bg: #4AB8FF;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #9B94FF;
    --btn-secondary-text: #1a1a1a;
    --link-color: #4AB8FF;
    --footer-bg: #4AB8FF;
}

.dark.theme-purple {
    --primary-color: #9B94FF;
    --primary-hover: #afa8ff;
    --secondary-color: #4AB8FF;
    --secondary-hover: #6bc7ff;
    --heading-color: #9B94FF;
    --btn-primary-bg: #9B94FF;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #4AB8FF;
    --btn-secondary-text: #1a1a1a;
    --link-color: #9B94FF;
    --footer-bg: #9B94FF;
}

.dark.theme-darkpink {
    --primary-color: #E85A8A;
    --primary-hover: #ed7ba0;
    --secondary-color: #9B94FF;
    --secondary-hover: #afa8ff;
    --heading-color: #E85A8A;
    --btn-primary-bg: #E85A8A;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #9B94FF;
    --btn-secondary-text: #1a1a1a;
    --link-color: #E85A8A;
    --footer-bg: #E85A8A;
}

.dark.theme-legalblue {
    --primary-color: #A8E0F5;
    --primary-hover: #b8e6f7;
    --secondary-color: #6BC896;
    --secondary-hover: #82d3a8;
    --heading-color: #A8E0F5;
    --btn-primary-bg: #A8E0F5;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #6BC896;
    --btn-secondary-text: #1a1a1a;
    --link-color: #A8E0F5;
    --footer-bg: #A8E0F5;
}

.dark.theme-pastelrainbow {
    --primary-color: #A8E0F5;
    --primary-hover: #b8e6f7;
    --secondary-color: #FCDD7C;
    --secondary-hover: #fde599;
    --heading-color: #A8D46F;
    --btn-primary-bg: #4AB8FF;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #F7BDB9;
    --btn-secondary-text: #1a1a1a;
    --link-color: #4AB8FF;
    --footer-bg: #A8D46F;
}

.dark.theme-pastelrainbow h3 {
    color: #F7BDB9;
}

.dark.theme-darkpastelrainbow {
    --primary-color: #4A7BB0;
    --primary-hover: #5a8bc0;
    --secondary-color: #D9B847;
    --secondary-hover: #e6c55a;
    --heading-color: #5A8F47;
    --btn-primary-bg: #0670A8;
    --btn-primary-text: var(--color-white);
    --btn-secondary-bg: #C96177;
    --btn-secondary-text: var(--color-white);
    --link-color: #0670A8;
    --footer-bg: #5A8F47;
}

.dark.theme-darkpastelrainbow h3 {
    color: #C96177;
}

.dark.theme-autumn {
    --primary-color: oklch(87.9% 0.169 91.605); /* amber-300 */
    --primary-hover: oklch(82.8% 0.189 84.429); /* amber-400 */
    --secondary-color: oklch(83.7% 0.128 66.29); /* orange-300 */
    --secondary-hover: oklch(75% 0.183 55.934); /* orange-400 */
    --tertiary-color: oklch(90.5% 0.182 98.111); /* yellow-300 */
    --tertiary-hover: oklch(85.2% 0.199 91.936); /* yellow-400 */
    --quaternary-color: oklch(82.3% 0.12 346.018); /* pink-300 */
    --quaternary-hover: oklch(71.8% 0.202 349.761); /* pink-400 */
    --quinary-color: oklch(89.7% 0.196 126.665); /* lime-300 */
    --quinary-hover: oklch(84.1% 0.238 128.85); /* lime-400 */
    --heading-color: oklch(87.9% 0.169 91.605);
    --btn-primary-bg: oklch(87.9% 0.169 91.605);
    --btn-primary-text: #1a1a1a;
    --btn-primary-hover: oklch(82.8% 0.189 84.429);
    --btn-secondary-bg: oklch(83.7% 0.128 66.29);
    --btn-secondary-text: #1a1a1a;
    --btn-secondary-hover: oklch(75% 0.183 55.934);
    --link-color: oklch(87.9% 0.169 91.605);
    --footer-bg: oklch(47.3% 0.137 46.201);
    --cta-gradient-start: oklch(87.9% 0.169 91.605);
    --cta-gradient-mid: oklch(83.7% 0.128 66.29);
    --cta-gradient-end: oklch(90.5% 0.182 98.111);
    --btn-gradient-start: oklch(83.7% 0.128 66.29);
    --btn-gradient-mid: oklch(87.9% 0.169 91.605);
    --btn-gradient-end: oklch(90.5% 0.182 98.111);
}

.dark.theme-ezytz {
    --primary-color: #87CEEB; /* Clear Sky Blue */
    --primary-hover: #6bb8d9;
    --secondary-color: #FFD700; /* Optimistic Sunshine Yellow */
    --secondary-hover: #FFBF00; /* Gold/Orange for Warnings */
    --tertiary-color: #3CB371; /* Growth & Success Green */
    --tertiary-hover: #2d8a56;
    --quaternary-color: #A0522D; /* Grounded Earth Brown */
    --quaternary-hover: #8b4513;
    --background-color: #1a1a1a;
    --background-secondary: #2a2a2a;
    --text-color: #FFFFFF; /* White Text */
    --heading-color: #87CEEB; /* Clear Sky Blue */
    --btn-primary-bg: #FFD700; /* Optimistic Sunshine Yellow */
    --btn-primary-text: #2F4F4F; /* Deep Forest Text */
    --btn-primary-hover: #FFBF00;
    --btn-secondary-bg: #3CB371; /* Growth & Success Green */
    --btn-secondary-text: #FFFFFF; /* White Text */
    --btn-secondary-hover: #2d8a56;
    --link-color: #87CEEB; /* Clear Sky Blue */
    --footer-bg: #2F4F4F; /* Deep Forest Text */
    --cta-gradient-start: #87CEEB;
    --cta-gradient-mid: #FFD700;
    --cta-gradient-end: #3CB371;
    --btn-gradient-start: #FFD700;
    --btn-gradient-mid: #87CEEB;
    --btn-gradient-end: #3CB371;
}

.dark.theme-ezytz2 {
    --primary-color: #87CEEB; /* Clear Sky Blue */
    --primary-hover: #a3d9f0;
    --secondary-color: #FFD700; /* Optimistic Sunshine Yellow */
    --secondary-hover: #ffe033;
    --tertiary-color: #3CB371; /* Growth & Success Green */
    --tertiary-hover: #5cc085;
    --quaternary-color: #CD853F; /* Lighter Brown for dark mode */
    --quaternary-hover: #A0522D;
    --quinary-color: #1E90FF; /* Dodger Blue (Glow) */
    --quinary-hover: #4da6ff;
    --senary-color: #FF6B6B; /* Lighter Red for dark mode */
    --senary-hover: #ff5252;
    --septenary-color: #4A5568; /* Dark Gray */
    --septenary-hover: #2d3748;
    --octonary-color: #6C7CE0; /* Lighter Royal Blue */
    --octonary-hover: #5a6fd8;
    --nonary-color: #68D391; /* Lighter Lime Green */
    --nonary-hover: #48bb78;
    --denary-color: #F6E05E; /* Lighter Goldenrod */
    --denary-hover: #ecc94b;
    --background-color: #1a1a1a;
    --background-secondary: #2a2a2a;
    --text-color: #FFFFFF; /* White Text */
    --heading-color: #87CEEB; /* Clear Sky Blue */
    --btn-primary-bg: #FFD700; /* Action Primary */
    --btn-primary-text: #2F4F4F; /* Deep Forest Text */
    --btn-primary-hover: #ffe033;
    --btn-secondary-bg: #1E90FF; /* Action Secondary */
    --btn-secondary-text: #FFFFFF; /* White Text */
    --btn-secondary-hover: #4da6ff;
    --link-color: #87CEEB; /* Clear Sky Blue */
    --footer-bg: #2F4F4F; /* Deep Forest Text */
    --cta-gradient-start: #87CEEB;
    --cta-gradient-mid: #FFD700;
    --cta-gradient-end: #1E90FF;
    --btn-gradient-start: #FFD700;
    --btn-gradient-mid: #1E90FF;
    --btn-gradient-end: #87CEEB;
}


/* =========================================================
   6. COMPONENT STYLES
   ========================================================= */

/* Body & Text */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

/* Buttons */
.btn-primary, button.primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    transition: background-color 0.2s;
}

.btn-primary:hover, button.primary:hover {
    background-color: var(--btn-primary-hover);
}

.btn-secondary, button.secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    transition: background-color 0.2s;
}

.btn-secondary:hover, button.secondary:hover {
    background-color: var(--btn-secondary-hover);
}

/* Header */
header, .header, #header {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-bottom: 1px solid var(--border-color);
}

header a, .header a, #header a {
    color: var(--header-text);
}

header a:hover, .header a:hover, #header a:hover {
    color: var(--primary-color) !important;
}

/* Footer */
footer, .footer, #footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
}

footer a, .footer a, #footer a {
    color: var(--footer-text);
}

footer a:hover, .footer a:hover, #footer a:hover {
    color: var(--secondary-color) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--card-shadow);
}

/* Links */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover);
}

/* Highlights */
.highlight {
    color: var(--secondary-color);
}

/* Dividers */
hr, .divider {
    border-color: var(--divider-color);
}

/* CTA Gradient Section */
.cta-gradient {
    background: linear-gradient(135deg, var(--cta-gradient-start) 0%, var(--cta-gradient-mid) 50%, var(--cta-gradient-end) 100%);
    transition: background 0.3s ease;
}

/* Button Gradient */
.btn-gradient {
    background: linear-gradient(135deg, var(--btn-gradient-start) 0%, var(--btn-gradient-mid) 50%, var(--btn-gradient-end) 100%);
    transition: background 0.3s ease;
}

/* Tailwind-like utility classes using theme variables */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-tertiary { background-color: var(--tertiary-color) !important; }
.bg-quaternary { background-color: var(--quaternary-color) !important; }
.bg-quinary { background-color: var(--quinary-color) !important; }
.bg-senary { background-color: var(--senary-color) !important; }
.bg-septenary { background-color: var(--septenary-color) !important; }
.bg-octonary { background-color: var(--octonary-color) !important; }
.bg-nonary { background-color: var(--nonary-color) !important; }
.bg-denary { background-color: var(--denary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-tertiary { color: var(--tertiary-color) !important; }
.text-quaternary { color: var(--quaternary-color) !important; }
.text-quinary { color: var(--quinary-color) !important; }
.text-senary { color: var(--senary-color) !important; }
.text-septenary { color: var(--septenary-color) !important; }
.text-octonary { color: var(--octonary-color) !important; }
.text-nonary { color: var(--nonary-color) !important; }
.text-denary { color: var(--denary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }


/* Background with opacity */
.bg-primary\/10 { background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important; }
.bg-primary\/20 { background-color: color-mix(in srgb, var(--primary-color) 20%, transparent) !important; }
.bg-secondary\/10 { background-color: color-mix(in srgb, var(--secondary-color) 10%, transparent) !important; }
.bg-secondary\/20 { background-color: color-mix(in srgb, var(--secondary-color) 20%, transparent) !important; }
.bg-tertiary\/10 { background-color: color-mix(in srgb, var(--tertiary-color) 10%, transparent) !important; }
.bg-tertiary\/20 { background-color: color-mix(in srgb, var(--tertiary-color) 20%, transparent) !important; }
.bg-quaternary\/10 { background-color: color-mix(in srgb, var(--quaternary-color) 10%, transparent) !important; }
.bg-quaternary\/20 { background-color: color-mix(in srgb, var(--quaternary-color) 20%, transparent) !important; }

/* Hover states */
.hover\:bg-primary\/20:hover { background-color: color-mix(in srgb, var(--primary-color) 20%, transparent) !important; }
.hover\:bg-secondary\/20:hover { background-color: color-mix(in srgb, var(--secondary-color) 20%, transparent) !important; }
.hover\:bg-tertiary\/20:hover { background-color: color-mix(in srgb, var(--tertiary-color) 20%, transparent) !important; }
.hover\:bg-quaternary\/20:hover { background-color: color-mix(in srgb, var(--quaternary-color) 20%, transparent) !important; }

/* Force white text on bg-primary buttons - override Tailwind */
button.bg-primary,
button.bg-primary.text-background-dark,
.bg-primary button {
    color: white !important;
}

.theme-yellow button.bg-primary,
.theme-yellow button.bg-primary.text-background-dark,
.theme-yellow .bg-primary button {
    color: var(--color-dark-grey) !important;
}

.theme-yellowpink button.bg-primary,
.theme-yellowpink button.bg-primary.text-background-dark,
.theme-yellowpink .bg-primary button {
    color: var(--color-dark-grey) !important;
}


@keyframes pulse-thrice {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-thrice {
  animation: pulse-thrice 2s ease-in-out 3;
}

@keyframes bounce-thrice {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-15px);
  }
  30% {
    transform: translateY(-8px);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-12px);
  }
  70% {
    transform: translateY(-20px);
  }
  90% {
    transform: translateY(-5px);
  }
}

.animate-bounce-thrice {
  animation: bounce-thrice 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3;
}