/* ===== Font/Radius/FontSize Setters ===== */
html[data-font="default"] {
    --font-family: var(--font-family-default);
}

html[data-font="sharp"] {
    --font-family: var(--font-family-sharp);
}

html[data-font="round"] {
    --font-family: var(--font-family-round);
}

html[data-font="serif"] {
    --font-family: var(--font-family-serif);
}

html[data-font="mono"] {
    --font-family: var(--font-family-mono);
}

html[data-font="display"] {
    --font-family: var(--font-family-display);
}

html[data-radius="sharp"] {
    --radius: 4px;
}

html[data-radius="round"] {
    --radius: 18px;
}

/* Small font size theme */
html[data-fontsize="small"] {
    --fs-legal: 9px;
    --fs-caption: 10px;
    --fs-meta: 11px;
    --fs-body: 13px;
    --fs-title-nav: 15px;
    --fs-title-sub: 16px;
    --fs-title-section: 18px;
    --fs-title-page: 22px;
    --fs-title-hero: 28px;
}

/* Large font size theme */
html[data-fontsize="large"] {
    --fs-legal: 11px;
    --fs-caption: 12px;
    --fs-meta: 14px;
    --fs-body: 16px;
    --fs-title-nav: 18px;
    --fs-title-sub: 20px;
    --fs-title-section: 24px;
    --fs-title-page: 28px;
    --fs-title-hero: 36px;
}

/* ===== Light Theme ===== */
html[data-theme='light'] {
    --color-bg-top: #eef1f8;
    --color-bg-base: #f6f7fb;
    --color-surface: #ffffff;
    --color-surface-alt: rgba(243, 245, 251, 0.1);
    --color-surface-block: #ffffff;
    --color-text: #0f1220;
    --color-text-muted: #4c4c4c;
    --color-brand: #4f46e5;
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.25);
    --color-shadow: rgba(0, 0, 0, .10);
    --overlay-hover: rgba(0, 0, 0, .04);
    --scrollbar-thumb: rgba(0, 0, 0, .14);
    --border-faint: rgba(0, 0, 0, .05);
    --border-soft: rgba(0, 0, 0, .05);
    --border-strong: rgba(0, 0, 0, .05);
    --color-brand-soft: #757575;
    /* Darker for visibility on white */
}

/* ===== Abyss Theme ===== */
html[data-theme='abyss'] {
    --color-bg-top: #1d202e;
    --color-bg-base: #13151f;
    --color-surface: #1d202e;
    --color-surface-alt: rgba(39, 42, 59, 0.1);
    --color-surface-block: #2e3142;
    --color-text: #e0e0e0;
    --color-text-muted: #a0a0c0;
    --color-brand: #4f46e5;
    --focus-ring: 0 0 0 3px rgba(138, 113, 247, .25);
}



/* ===== Matrix Theme ===== */
html[data-theme='matrix'] {
    --color-bg-top: #0d0d0d;
    --color-bg-base: #000000;
    --color-surface: #0d0d0d;
    --color-surface-alt: rgba(26, 26, 26, 0.1);
    --color-surface-block: #262626;
    --color-text: #00ff41;
    --color-text-muted: #00b32d;
    --color-brand: #00ff41;
    --border-faint: rgba(0, 255, 65, 0.1);
    --border-soft: rgba(0, 255, 65, 0.15);
    --border-strong: rgba(0, 255, 65, 0.2);
    --focus-ring: 0 0 0 3px rgba(0, 255, 65, 0.25);
}





/* ===== New Year ===== */
html[data-theme='fireworks'] {
    --color-bg-top: #0f1116;
    --color-bg-base: #0a0c10;
    --color-surface: #11141b;
    --color-surface-alt: rgba(23, 27, 35, 0.1);
    --color-surface-block: #1d222c;
    --color-text: #f4f4f6;
    --color-text-muted: #b7bcc6;
    --color-brand: #d6b25e;
    /* gold */
    --focus-ring: 0 0 0 3px rgba(214, 178, 94, .28);
    --color-shadow: rgba(0, 0, 0, .35);
    --overlay-hover: rgba(255, 255, 255, .04);
    --border-faint: rgba(255, 255, 255, .05);
    --border-soft: rgba(255, 255, 255, .05);
    --border-strong: rgba(255, 255, 255, .05);
}


/* Fireworks / New Year Visuals */
html[data-theme='fireworks'] {
    --brand-gradient: linear-gradient(135deg, #d6b25e 0%, #fff0a0 50%, #d6b25e 100%);
}

html[data-theme='fireworks'] .topbar {
    border-bottom: 3px solid transparent;
    border-image: var(--brand-gradient) 1;
    box-shadow: 0 4px 20px -5px rgba(214, 178, 94, 0.3);
}

html[data-theme='fireworks'] .item.active {
    background: linear-gradient(90deg, rgba(214, 178, 94, 0.1), transparent);
    position: relative;
    overflow: hidden;
}

html[data-theme='fireworks'] .item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-gradient);
    box-shadow: 0 0 10px rgba(214, 178, 94, 0.8);
}

html[data-theme='fireworks'] #brand-title {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(214, 178, 94, 0.5);
}

/* Fireworks Background Animation */
@keyframes bang {
    0% {
        box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    }

    100% {
        box-shadow: -100px -200px 0px transparent, 100px -50px 0px transparent, 50px -200px 0px transparent, -150px -100px 0px transparent, 0px -250px 0px transparent;
    }
}

@keyframes bang-gold {
    0% {
        box-shadow: 0 0 #d6b25e, 0 0 #d6b25e, 0 0 #d6b25e, 0 0 #d6b25e, 0 0 #d6b25e;
    }

    100% {
        box-shadow: -120px 140px 0px transparent, 120px 80px 0px transparent, 60px 160px 0px transparent, -140px 120px 0px transparent, 0px 180px 0px transparent;
    }
}

/* Topbar specific fireworks - Moved to HTML to bypass stacking contexts */
html[data-theme='fireworks']::before,
html[data-theme='fireworks']::after {
    content: '';
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    /* Above preloader (9999) */
    opacity: 0;
}

/* Left burst */
html[data-theme='fireworks']::before {
    left: 20%;
    top: 60px;
    /* Adjusted for topbar height approx */
    animation: bang-gold 2.5s ease-out infinite backwards;
    animation-delay: 0.5s;
}

/* Right burst */
html[data-theme='fireworks']::after {
    right: 20%;
    top: 65px;
    animation: bang 2.5s ease-out infinite backwards;
    animation-delay: 1.2s;
}

/* Soft Snow Effect from Topbar */
@keyframes snow {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 400px 110vh, -400px 110vh, 200px 110vh;
    }
}

html[data-theme='fireworks'] .topbar::before {
    content: '';
    position: fixed;
    top: 56px;
    /* Start below topbar */
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    /* Behind other fixed elements like fireworks but visible */
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 1px, transparent 1.5px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 1.5px, transparent 2px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 2px, transparent 2.5px);
    background-size: 550px 550px, 400px 400px, 300px 300px;
    animation: snow 12s linear infinite;
    opacity: 0.8;
}



@keyframes gravity {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(150px);
        opacity: 0;
    }
}

html[data-theme='fireworks'] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 2px, transparent 2.5px),
        radial-gradient(circle at 10% 20%, rgba(214, 178, 94, 0.05) 1px, transparent 1.5px),
        radial-gradient(circle at 90% 80%, rgba(214, 178, 94, 0.05) 1px, transparent 1.5px);
    background-size: 100px 100px, 60px 60px, 80px 80px;
    opacity: 0.6;
}

/* Simulated Fireworks using pseudo-elements on a container would be ideal, 
    but for a simple pure-CSS global effect, we can use a multi-layered box-shadow animation 
    on a fixed element if we really want "explosions".
    However, to be "non-intrusive" and "classy", a subtle particle rise or shimmer might be better.
    Let's go with a subtle animated gradient sheen for the festive feel + simpler "stars" */

html[data-theme='fireworks'] body::after {
    content: '';
    position: fixed;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    animation: bang 4s ease-out infinite backwards, gravity 4s ease-in infinite backwards;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

html[data-theme='samba'] {
    --color-bg-top: #1a1223;
    --color-bg-base: #130d1a;
    --color-surface: #1c1428;
    --color-surface-alt: rgba(36, 26, 51, 0.1);
    --color-surface-block: #2d2141;
    --color-text: #ece7f5;
    --color-text-muted: #c9bddf;
    --color-brand: #D35AE8;
    --focus-ring: 0 0 0 3px rgba(211, 90, 232, .28);
    --color-shadow: rgba(0, 0, 0, .3);
    --overlay-hover: rgba(255, 255, 255, .03);
    --border-faint: rgba(255, 255, 255, .05);
    --border-soft: rgba(255, 255, 255, .05);
    --border-strong: rgba(255, 255, 255, .05);
}

/* ===== International Women's Day ===== */
html[data-theme='violet-bloom'] {
    --color-bg-top: #2b1d33;
    --color-bg-base: #1f1526;
    --color-surface: #2e1f3a;
    --color-surface-alt: rgba(57, 37, 74, 0.1);
    --color-surface-block: #442c59;
    --color-text: #f3eaf7;
    --color-text-muted: #d9c7e6;
    --color-brand: #a85ad4;
    /* violeta */
    --focus-ring: 0 0 0 3px rgba(168, 90, 212, .28);
    --color-shadow: rgba(0, 0, 0, .28);
    --overlay-hover: rgba(255, 255, 255, .03);
    --border-faint: rgba(255, 255, 255, .05);
    --border-soft: rgba(255, 255, 255, .05);
    --border-strong: rgba(255, 255, 255, .05);
}



/* ===== Pride Month ===== */
html[data-theme='pride-rainbow'] {
    --color-bg-top: #121218;
    --color-bg-base: #0c0c11;
    --color-surface: #15151e;
    --color-surface-alt: rgba(27, 27, 39, 0.1);
    --color-surface-block: #222233;
    --color-text: #eef0f4;

    --color-text-muted: #b8bcc9;
    --color-brand: #ffffff;
    /* neutro p/ contrastar com gradiente */
    --focus-ring: 0 0 0 3px rgba(255, 255, 255, .22);
    --color-shadow: rgba(0, 0, 0, .32);
    --overlay-hover: rgba(255, 255, 255, .04);
    --border-faint: rgba(255, 255, 255, .05);
    --border-soft: rgba(255, 255, 255, .05);
    --border-strong: rgba(255, 255, 255, .05);

    /* opcional: use esse gradiente na borda/botões */
    --brand-gradient: linear-gradient(90deg,
            #e40303 0%, #ff8c00 16%, #ffed00 32%, #008026 48%, #004dff 64%, #750787 80%, #b4005a 100%);
}

/* Pride Rainbow Visuals */
html[data-theme='pride-rainbow'] .topbar {
    border-bottom: 3px solid transparent;
    border-image: var(--brand-gradient) 1;
}

html[data-theme='pride-rainbow'] .item.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent);
    position: relative;
    overflow: hidden;
}

html[data-theme='pride-rainbow'] .item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-gradient);
}

html[data-theme='pride-rainbow'] #brand-title {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ===== Halloween ===== */
html[data-theme='pumpkin-spice'] {
    --color-bg-top: #130e0a;
    --color-bg-base: #0e0a07;
    --color-surface: #1a1410;
    --color-surface-alt: rgba(34, 27, 21, 0.1);
    --color-surface-block: #2b221b;
    --color-text: #f1e9e4;
    --color-text-muted: #c8bcb3;
    --color-brand: #ff8c2a;
    /* abóbora */
    --focus-ring: 0 0 0 3px rgba(255, 140, 42, .28);
    --color-shadow: rgba(0, 0, 0, .34);
    --overlay-hover: rgba(255, 255, 255, .03);
    --border-faint: rgba(255, 255, 255, .05);
    --border-soft: rgba(255, 255, 255, .05);
    --border-strong: rgba(255, 255, 255, .05);
}

/* ===== Christmas ===== */
html[data-theme='holly-jolly'] {
    --color-bg-top: #0f1b16;
    /* pine */
    --color-bg-base: #0a1410;
    --color-surface: #14231c;
    --color-surface-alt: rgba(26, 45, 36, 0.1);
    --color-surface-block: #21382c;
    --color-text: #eef6f2;
    --color-text-muted: #c7d7cf;
    --color-brand: #d84c4c;
    /* vermelho festivo */
    --focus-ring: 0 0 0 3px rgba(216, 76, 76, .28);
    --color-shadow: rgba(0, 0, 0, .30);
    --overlay-hover: rgba(255, 255, 255, .03);
    --border-faint: rgba(255, 255, 255, .05);
    --border-soft: rgba(255, 255, 255, .05);
    --border-strong: rgba(255, 255, 255, .05);
    /* toque opcional de dourado em ícones/decor */
    --accent-gold: #d6b25e;
}

/* Christmas Eve Visuals (Snow & Lights) */
html[data-theme='holly-jolly'] .topbar {
    overflow: visible;
}

/* Snowfall Effect (reusing @keyframes snow) */
html[data-theme='holly-jolly'] .topbar::before {
    content: '';
    position: fixed;
    top: 56px;
    /* Start below topbar */
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(238, 246, 242, 0.5) 1px, transparent 1.5px),
        radial-gradient(circle at 50% 50%, rgba(238, 246, 242, 0.4) 1.5px, transparent 2px),
        radial-gradient(circle at 50% 50%, rgba(238, 246, 242, 0.3) 2px, transparent 2.5px);
    background-size: 550px 550px, 400px 400px, 300px 300px;
    animation: snow 12s linear infinite;
    opacity: 0.8;
}


/* Suspended Lights on Topbar (SVG Background) */
html[data-theme='holly-jolly'] .topbar::after {
    content: '';
    position: absolute;
    top: 100%;
    /* Attach to bottom of topbar */
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 101;

    /* SVG Data URI for draped lights */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0,0 Q40,35 80,0' fill='none' stroke='%23888' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='20' cy='18' r='3.5' fill='%23ff3f3f' stroke='%23cc0000' stroke-width='0.5' /%3E%3Ccircle cx='40' cy='25' r='3.5' fill='%23ffdf38' stroke='%23e6c200' stroke-width='0.5' /%3E%3Ccircle cx='60' cy='18' r='3.5' fill='%232ea76b' stroke='%231b804e' stroke-width='0.5' /%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 80px 40px;


    /* filter: drop-shadow(0 2px 4px rgba(255, 223, 56, 0.4)); */
    /* Drop shadow can be performance heavy, but adds glow */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));

    /* Bounce Animation */
    animation: light-bounce 3s ease-in-out infinite;
    transform-origin: top center;
}

/* Ambient Glow casting down from the lights ("Clearing the page") */
html[data-theme='holly-jolly'] .topbar {
    box-shadow: 0 10px 50px -5px rgba(255, 223, 56, 0.15);
    z-index: 102;
    /* Ensure glow is on top */
}

@keyframes light-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}




/* Christmas Hat on Logo (Targeting parent .brand) */
html[data-theme='holly-jolly'] .brand {
    position: relative;
    z-index: 105;
    /* Ensure above lights */
}

html[data-theme='holly-jolly'] .brand::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0px;
    width: 34px;
    height: 34px;
    /* Detailed Floppy Hat */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cfilter id='f1' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='1' flood-color='rgba(0,0,0,0.2)'/%3E%3C/filter%3E%3ClinearGradient id='g1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ff4d4d'/%3E%3Cstop offset='100%25' stop-color='%23cc0000'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Hat Body --%3E%3Cpath d='M10,38 Q5,20 25,5 Q45,20 40,38 Z' fill='url(%23g1)' filter='url(%23f1)'/%3E%3C!-- Floppy Tip --%3E%3Cpath d='M25,5 Q35,5 42,15 L38,18 Q32,8 25,5' fill='url(%23g1)'/%3E%3C!-- White Base --%3E%3Cpath d='M8,36 Q25,42 42,36 L42,42 Q25,48 8,42 Z' fill='%23fff' filter='url(%23f1)'/%3E%3C!-- Pom Pom --%3E%3Ccircle cx='42' cy='15' r='5' fill='%23fff' filter='url(%23f1)'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: bottom left;
    transform: rotate(-20deg);
    z-index: 20;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hat Tip Animation when Sidebar is OPEN (not collapsed) */
.sidebar:not(.collapsed) html[data-theme='holly-jolly'] .brand::after,
html[data-theme='holly-jolly'] .sidebar:not(.collapsed) .brand::after {
    transform: rotate(-45deg) scale(1.1) translateX(4px);
}

/* Wiggle on hover for fun */
html[data-theme='holly-jolly'] .brand:hover::after {
    animation: hat-wiggle 1s ease-in-out infinite;
}

@keyframes hat-wiggle {

    0%,
    100% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(-10deg);
    }
}

/* Override wiggle if sidebar is open to maintain tipped state with wiggle */
html[data-theme='holly-jolly'] .sidebar:not(.collapsed) .brand:hover::after {
    animation: hat-wiggle-tipped 1s ease-in-out infinite;
}

@keyframes hat-wiggle-tipped {

    0%,
    100% {
        transform: rotate(-45deg) scale(1.1) translateX(4px);
    }

    50% {
        transform: rotate(-35deg) scale(1.1) translateX(4px);
    }
}

/* ===== BioBaron Theme ===== */
html[data-theme='biobaron'] {
    --color-bg-top: #ffffff;
    --color-bg-base: #f9fbf9;
    --color-surface: #ffffff;
    --color-surface-alt: rgba(27, 107, 46, 0.05);
    --color-surface-block: #ffffff;
    --color-text: #2d3748;
    --color-text-muted: #718096;
    --color-brand: #1B6B2E;
    --color-brand-soft: #8CC63F;
    --color-accent: #8CC63F;
    --border-faint: rgba(27, 107, 46, 0.05);
    --border-soft: rgba(27, 107, 46, 0.1);
    --border-strong: rgba(27, 107, 46, 0.2);
    --color-shadow: rgba(27, 107, 46, 0.12);
    --radius: 16px;

    --accent-gradient: linear-gradient(135deg, #8CC63F 0%, #5BA31A 100%);
    --green-gradient: linear-gradient(135deg, #1B6B2E 0%, #0E3B1A 100%);
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --container-width: 1200px;
    --header-height: 90px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(27, 107, 46, 0.12);
    --shadow-lg: 0 10px 40px rgba(27, 107, 46, 0.18);
    --shadow-hover: 0 20px 50px rgba(27, 107, 46, 0.22);
}

/* ===== RP Ambiental Theme ===== */
html[data-theme='rp_ambiental'] {
    /* Colors mapped from rp_site-master */
    --color-bg-top: #0A2540;
    --color-bg-base: #F7F9FC;
    --color-surface: #FFFFFF;
    --color-surface-alt: rgba(255, 255, 255, 0.8);
    --color-surface-block: #FFFFFF;
    --color-text: #1A202C;
    --color-text-muted: #718096;
    --color-brand: #004B87;
    --color-accent: #00E676;
    
    --accent-gradient: linear-gradient(135deg, #00D4FF 0%, #00E676 100%);
    /* Typography */
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;

    /* Spacing & Layout */
    --container-width: 1200px;
    --header-height: 90px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Effects */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
    --glass-blur: blur(12px);
}

/* ===== Esy Theme ===== */
html[data-theme='esy'] {
    --color-bg-top: #050508;
    --color-bg-base: #020204;
    --color-surface: #0a0b10;
    --color-surface-alt: rgba(59, 130, 246, 0.05);
    --color-surface-block: #12141d;
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-brand: #3b82f6;
    --color-brand-soft: #60a5fa;
    --color-accent: #3b82f6;
    --border-faint: rgba(59, 130, 246, 0.05);
    --border-soft: rgba(59, 130, 246, 0.1);
    --border-strong: rgba(59, 130, 246, 0.2);
    --color-shadow: rgba(0, 0, 0, 0.5);
    --radius: 12px;

    --accent-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glass-blur: blur(16px);
}