/* =========================================================
   1. COLOR PALETTE DEFINITION (GLOBAL VARIABLES)
   ========================================================= */
:root {
    /* Base Color Palette */
    --color-pink: #F5A9A7;
    --color-dark-pink: #D81B60;
    --color-orange: #EB935B;
    --color-teal: #69B8BF;
    --color-blue: #6E7B9D;
    --color-dark-blue: #0E7CF4;
    --color-light-blue: #0AA0F6;
    --color-yellow: #FCDD7C;
    --color-green: #86B079;
    --color-light-green: #8BC34A;
    --color-brown: #A6785D;
    --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;
}


/* =========================================================
   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);
}


/* =========================================================
   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);
}


/* =========================================================
   4. INDIVIDUAL THEMES (Light Mode)
   ========================================================= */

/* --- 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);
}

/* --- Teal Theme --- */
.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);
}

/* --- Pink Theme --- */
.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);
}

/* --- Orange Theme --- */
.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);
}

/* --- Yellow Theme --- */
.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);
}

/* --- Yellow Pink Theme --- */
.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);
}

/* --- Green Theme --- */
.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);
}

/* --- Brown Theme --- */
.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);
}

/* --- New Themes from new-site --- */

/* --- Dark Blue Theme --- */
.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;
}

/* --- Light Green Theme --- */
.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;
}

/* --- Red Theme --- */
.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;
}

/* --- Cyan Theme --- */
.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;
}

/* --- Light Blue Theme --- */
.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;
}

/* --- Purple Theme --- */
.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;
}

/* --- Dark Pink Theme --- */
.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;
}

/* --- Legal Blue Theme --- */
.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;
}

/* --- Pastel Rainbow Theme --- */
.theme-pastelrainbow {
    --primary-color: #0AA0F6;
    --primary-hover: #0880c4;
    --secondary-color: #FCDD7C;
    --secondary-hover: #fad45e;
    --heading-color: #8BC34A;
    --btn-primary-bg: #0AA0F6;
    --btn-primary-text: var(--color-white);
    --btn-primary-hover: #0880c4;
    --btn-secondary-bg: #F5A9A7;
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover: #e08f8d;
    --link-color: #0AA0F6;
    --footer-bg: #8BC34A;
    --cta-gradient-start: #0AA0F6;
    --cta-gradient-mid: #FCDD7C;
    --cta-gradient-end: #F5A9A7;
}


.theme-pastelrainbow h3 {
    color: #F5A9A7;
}


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

.dark.theme-blue {
    --primary-color: #8B9DC3;
    --primary-hover: #a3b3d4;
    --heading-color: #8B9DC3;
}

.dark.theme-teal {
    --primary-color: #7FCCD4;
    --primary-hover: #96d9e0;
    --heading-color: #7FCCD4;
    --background-color: #1a1f1f;
}

.dark.theme-pink {
    --primary-color: #F7BDB9;
    --primary-hover: #f9ccc9;
    --heading-color: #F7BDB9;
}

.dark.theme-orange {
    --primary-color: #F5A97A;
    --primary-hover: #f7ba91;
    --heading-color: #F5A97A;
    --background-color: #1f1c18;
}

.dark.theme-yellow {
    --primary-color: #FCDD7C;
    --primary-hover: #fde599;
    --heading-color: #D4A574;
    --btn-primary-text: #1a1a1a;
}

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

.dark.theme-green {
    --primary-color: #9BC68F;
    --primary-hover: #afd1a5;
    --heading-color: #9BC68F;
    --background-color: #1a1f1a;
}

.dark.theme-brown {
    --primary-color: #C0927A;
    --primary-hover: #cfa58f;
    --heading-color: #C0927A;
}


/* =========================================================
   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;
}

/* Tailwind-like utility classes using theme variables */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-tertiary { color: var(--primary-color) !important; }
.text-quaternary { color: var(--secondary-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(--primary-color) 10%, transparent) !important; }
.bg-tertiary\/20 { background-color: color-mix(in srgb, var(--primary-color) 20%, transparent) !important; }
.bg-quaternary\/20 { background-color: color-mix(in srgb, var(--secondary-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(--primary-color) 20%, transparent) !important; }
.hover\:bg-quaternary\/90:hover { background-color: color-mix(in srgb, var(--secondary-color) 90%, 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;
}