/**
 * ============================================================================
 * AtomFive Global Themes & Design System Tokens (themes.css)
 * ============================================================================
 * Centralized theme engine for AtomFive Hub & Apps.
 * Default Theme: black-piano
 *
 * Index:
 *   1. BASELINE DESIGN TOKENS & :root DEFAULTS (Dark Baseline)
 *   2. TYPOGRAPHY SYSTEM (Font Families & Data Attributes)
 *   3. SHAPE & RADIUS SYSTEM (Border Radii)
 *   4. TYPE SCALE SYSTEM (Font Sizes)
 *   5. STANDARD PALETTES
 *      - black-piano (Official Default)
 *      - dark
 *      - light
 *      - abyss
 *      - violet-bloom
 *      - samba
 *   6. SPECIAL & SEASONAL THEMES
 *      - matrix
 *      - fireworks
 *      - pride-rainbow
 *      - pumpkin-spice (Halloween)
 *      - holly-jolly (Christmas)
 *   7. BRAND & LANDING PAGE THEMES
 *      - biobaron
 *      - rp_ambiental
 *      - esy
 *      - jn_eletrica
 *   8. THEME PREVIEW CARDS (Appearance Settings Panel)
 *   9. SPECIAL THEME VISUAL EFFECTS & ANIMATIONS
 * ============================================================================
 */

/* ============================================================================
   1. BASELINE DESIGN TOKENS & :root DEFAULTS
   ============================================================================ */
:root {
    /* Core Theme Colors (Default: black-piano aligned) */
    --color-bg-top: #0d0d0d;
    --color-bg-base: #0d0d0d;
    --color-surface: #161616;
    --color-surface-transparent: rgba(22, 22, 22, 0.4);
    --color-surface-alt: rgba(255, 255, 255, 0.03);
    --color-surface-block: #1a1a1a;
    --color-text: #F1F1F1;
    --color-text-muted: rgba(241, 241, 241, 0.5);
    --color-icon-dim: #818181;
    --color-brand: #4F46E5;
    --color-brand-soft: #d4ce9d;
    --color-brand-border: #5f5d47;
    --color-accent: #81C784;
    --color-danger: #FF3F3F;
    --color-success: #81C784;
    --color-shadow: rgba(0, 0, 0, 0.50);

    /* Fixed Utility Colors */
    --orange: #f47b53;
    --yellow: #ffdf38;
    --purple: #8c6eb3;
    --blue: #2b4b59;
    --green: #2ea76b;
    --gray: #b7b7b7;

    /* States & Overlays */
    --overlay-hover: rgba(255, 255, 255, 0.05);
    --brand-tint: color-mix(in srgb, var(--color-brand) 18%, transparent);
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);

    /* Borders (Default) */
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.05);

    /* Layout & Motion */
    --layout-sidebar: 320px;
    --focus-ring: 0 0 0 3px rgba(229, 182, 17, 0.25);
    --radius-sm: 6px;
    --radius: 12px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    --anim-fast: 0.18s;
    --shadow-elevation: 0 10px 28px var(--color-shadow);
    --color-border: var(--border-soft);
    --color-surface-hover: var(--overlay-hover);

    /* Typography Definitions */
    --font-family-default: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-family-sharp: "Inter", sans-serif;
    --font-family-round: "Nunito", sans-serif;
    --font-family-serif: "Roboto Slab", serif;
    --font-family-mono: "Source Code Pro", monospace;
    --font-family-display: "Caveat", cursive;
    --font-family: var(--font-family-default);

    /* Typography Scale Baseline */
    --fs-xsmall: 7.5px;
    --fs-legal: 10px;
    --fs-caption: 11px;
    --fs-meta: 12px;
    --fs-body: 14px;
    --fs-title-nav: 16px;
    --fs-title-sub: 18px;
    --fs-title-section: 20px;
    --fs-title-page: 24px;
    --fs-title-hero: 32px;
}

/* ============================================================================
   2. TYPOGRAPHY SYSTEM (Font Family 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);
}

/* ============================================================================
   3. SHAPE & RADIUS SYSTEM
   ============================================================================ */
html[data-radius="sharp"] {
    --radius-sm: 2px;
    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;
}

html[data-radius="default"] {
    --radius-sm: 6px;
    --radius: 12px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
}

html[data-radius="round"] {
    --radius-sm: 10px;
    --radius: 18px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-full: 9999px;
}

/* ============================================================================
   4. TYPE SCALE SYSTEM (Font Size Scales)
   ============================================================================ */
html[data-fontsize="small"] {
    --fs-xsmall: 6.5px;
    --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;
}

html[data-fontsize="default"] {
    --fs-xsmall: 7.5px;
    --fs-legal: 10px;
    --fs-caption: 11px;
    --fs-meta: 12px;
    --fs-body: 14px;
    --fs-title-nav: 16px;
    --fs-title-sub: 18px;
    --fs-title-section: 20px;
    --fs-title-page: 24px;
    --fs-title-hero: 32px;
}

html[data-fontsize="large"] {
    --fs-xsmall: 8.5px;
    --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;
}

/* ============================================================================
   5. STANDARD PALETTES (22 Canonical Design Variables)
   ============================================================================ */

/* ===== Black Piano Theme (Official Default) ===== */
html[data-theme='black-piano'] {
    --color-bg-top: #0d0d0d;
    --color-bg-base: #0d0d0d;
    --color-surface: #161616;
    --color-surface-transparent: rgba(22, 22, 22, 0.4);
    --color-surface-alt: rgba(255, 255, 255, 0.03);
    --color-surface-block: #1a1a1a;
    --color-text: #f1f1f1;
    --color-text-muted: rgba(241, 241, 241, 0.5);
    --color-icon-dim: #818181;
    --color-brand: #4f46e5;
    --color-brand-soft: #818cf8;
    --color-brand-border: rgba(79, 70, 229, 0.3);
    --color-accent: #81c784;
    --color-danger: #ff3f3f;
    --color-success: #81c784;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.25);
    --overlay-hover: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.08);
}

html[data-theme='black-piano'] body {
    background: radial-gradient(circle at 50% -20%, #2a2a2a 0%, #0d0d0d 70%);
}

/* ===== Dark Theme ===== */
html[data-theme='dark'] {
    --color-bg-top: #282828;
    --color-bg-base: #252424;
    --color-surface: #282828;
    --color-surface-transparent: rgba(40, 40, 40, 0.4);
    --color-surface-alt: rgba(58, 58, 58, 0.4);
    --color-surface-block: #494949dd;
    --color-text: #F1F1F1;
    --color-text-muted: #cccccc;
    --color-icon-dim: #818181;
    --color-brand: #4E46E5;
    --color-brand-soft: #d4ce9d;
    --color-brand-border: #5f5d47;
    --color-accent: #81C784;
    --color-danger: #FF3F3F;
    --color-success: #81C784;
    --color-shadow: rgba(0, 0, 0, 0.20);
    --focus-ring: 0 0 0 3px rgba(78, 70, 229, 0.25);
    --overlay-hover: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.08);
}

/* ===== Light Theme ===== */
html[data-theme='light'] {
    --color-bg-top: #eef1f8;
    --color-bg-base: #f6f7fb;
    --color-surface: #ffffff;
    --color-surface-transparent: rgba(255, 255, 255, 0.6);
    --color-surface-alt: rgba(243, 245, 251, 0.6);
    --color-surface-block: #ffffff;
    --color-text: #0f1220;
    --color-text-muted: #4c4c4c;
    --color-icon-dim: #9ca3af;
    --color-brand: #4f46e5;
    --color-brand-soft: #757575;
    --color-brand-border: #d1d5db;
    --color-accent: #10b981;
    --color-danger: #ef4444;
    --color-success: #10b981;
    --color-shadow: rgba(0, 0, 0, 0.10);
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.25);
    --overlay-hover: rgba(0, 0, 0, 0.04);
    --scrollbar-thumb: rgba(0, 0, 0, 0.14);
    --border-faint: rgba(0, 0, 0, 0.05);
    --border-soft: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);
}

html[data-theme='light'] body {
    background: radial-gradient(circle at 50% -20%, var(--color-bg-base) 0%, color-mix(in srgb, var(--color-brand) 8%, var(--color-bg-base)) 70%);
}

/* ===== Abyss Theme ===== */
html[data-theme='abyss'] {
    --color-bg-top: #1d202e;
    --color-bg-base: #13151f;
    --color-surface: #1d202e;
    --color-surface-transparent: rgba(29, 32, 46, 0.4);
    --color-surface-alt: rgba(39, 42, 59, 0.25);
    --color-surface-block: #2e3142;
    --color-text: #e0e0e0;
    --color-text-muted: #a0a0c0;
    --color-icon-dim: #6b7280;
    --color-brand: #4f46e5;
    --color-brand-soft: #8a71f7;
    --color-brand-border: rgba(138, 113, 247, 0.3);
    --color-accent: #38bdf8;
    --color-danger: #f87171;
    --color-success: #34d399;
    --color-shadow: rgba(0, 0, 0, 0.35);
    --focus-ring: 0 0 0 3px rgba(138, 113, 247, 0.25);
    --overlay-hover: rgba(255, 255, 255, 0.04);
    --scrollbar-thumb: rgba(160, 160, 192, 0.2);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
}

/* ===== Violet Bloom Theme (International Women's Day) ===== */
html[data-theme='violet-bloom'] {
    --color-bg-top: #2b1d33;
    --color-bg-base: #1f1526;
    --color-surface: #2e1f3a;
    --color-surface-transparent: rgba(46, 31, 58, 0.4);
    --color-surface-alt: rgba(57, 37, 74, 0.3);
    --color-surface-block: #442c59;
    --color-text: #f3eaf7;
    --color-text-muted: #d9c7e6;
    --color-icon-dim: #9b82a8;
    --color-brand: #a85ad4;
    --color-brand-soft: #c084fc;
    --color-brand-border: rgba(168, 90, 212, 0.3);
    --color-accent: #f472b6;
    --color-danger: #fb7185;
    --color-success: #4ade80;
    --color-shadow: rgba(0, 0, 0, 0.28);
    --focus-ring: 0 0 0 3px rgba(168, 90, 212, 0.28);
    --overlay-hover: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(217, 199, 230, 0.2);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
}

/* ===== Samba Theme ===== */
html[data-theme='samba'] {
    --color-bg-top: #1a1223;
    --color-bg-base: #130d1a;
    --color-surface: #1c1428;
    --color-surface-transparent: rgba(28, 20, 40, 0.4);
    --color-surface-alt: rgba(36, 26, 51, 0.3);
    --color-surface-block: #2d2141;
    --color-text: #ece7f5;
    --color-text-muted: #c9bddf;
    --color-icon-dim: #9381a9;
    --color-brand: #D35AE8;
    --color-brand-soft: #f472b6;
    --color-brand-border: rgba(211, 90, 232, 0.3);
    --color-accent: #facc15;
    --color-danger: #f43f5e;
    --color-success: #2dd4bf;
    --color-shadow: rgba(0, 0, 0, 0.30);
    --focus-ring: 0 0 0 3px rgba(211, 90, 232, 0.28);
    --overlay-hover: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(201, 189, 223, 0.2);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
}

/* ============================================================================
   6. SPECIAL & SEASONAL THEMES (22 Canonical Design Variables)
   ============================================================================ */

/* ===== Matrix Theme ===== */
html[data-theme='matrix'] {
    --color-bg-top: #0d0d0d;
    --color-bg-base: #000000;
    --color-surface: #0d0d0d;
    --color-surface-transparent: rgba(13, 13, 13, 0.5);
    --color-surface-alt: rgba(26, 26, 26, 0.25);
    --color-surface-block: #141f16;
    --color-text: #00ff41;
    --color-text-muted: #00b32d;
    --color-icon-dim: #008020;
    --color-brand: #00ff41;
    --color-brand-soft: #5cff85;
    --color-brand-border: rgba(0, 255, 65, 0.3);
    --color-accent: #39ff14;
    --color-danger: #ff0033;
    --color-success: #00ff41;
    --color-shadow: rgba(0, 255, 65, 0.20);
    --focus-ring: 0 0 0 3px rgba(0, 255, 65, 0.25);
    --overlay-hover: rgba(0, 255, 65, 0.05);
    --scrollbar-thumb: rgba(0, 255, 65, 0.25);
    --border-faint: rgba(0, 255, 65, 0.10);
    --border-soft: rgba(0, 255, 65, 0.15);
    --border-strong: rgba(0, 255, 65, 0.25);
}

/* ===== Fireworks Theme (New Year) ===== */
html[data-theme='fireworks'] {
    --color-bg-top: #0f1116;
    --color-bg-base: #0a0c10;
    --color-surface: #11141b;
    --color-surface-transparent: rgba(17, 20, 27, 0.5);
    --color-surface-alt: rgba(23, 27, 35, 0.3);
    --color-surface-block: #1d222c;
    --color-text: #f4f4f6;
    --color-text-muted: #b7bcc6;
    --color-icon-dim: #8b92a0;
    --color-brand: #d6b25e;
    --color-brand-soft: #fff0a0;
    --color-brand-border: rgba(214, 178, 94, 0.3);
    --color-accent: #ffd700;
    --color-danger: #ff4d4d;
    --color-success: #52c41a;
    --color-shadow: rgba(0, 0, 0, 0.35);
    --focus-ring: 0 0 0 3px rgba(214, 178, 94, 0.28);
    --overlay-hover: rgba(255, 255, 255, 0.04);
    --scrollbar-thumb: rgba(214, 178, 94, 0.25);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(214, 178, 94, 0.12);
    --border-strong: rgba(214, 178, 94, 0.20);
    --brand-gradient: linear-gradient(135deg, #d6b25e 0%, #fff0a0 50%, #d6b25e 100%);
}

/* ===== Pride Rainbow Theme ===== */
html[data-theme='pride-rainbow'] {
    --color-bg-top: #121218;
    --color-bg-base: #0c0c11;
    --color-surface: #15151e;
    --color-surface-transparent: rgba(21, 21, 30, 0.5);
    --color-surface-alt: rgba(27, 27, 39, 0.3);
    --color-surface-block: #222233;
    --color-text: #eef0f4;
    --color-text-muted: #b8bcc9;
    --color-icon-dim: #8c91a4;
    --color-brand: #ffffff;
    --color-brand-soft: #ffd166;
    --color-brand-border: rgba(255, 255, 255, 0.2);
    --color-accent: #06d6a0;
    --color-danger: #ef476f;
    --color-success: #06d6a0;
    --color-shadow: rgba(0, 0, 0, 0.32);
    --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.22);
    --overlay-hover: rgba(255, 255, 255, 0.04);
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    --brand-gradient: linear-gradient(90deg, #e40303 0%, #ff8c00 16%, #ffed00 32%, #008026 48%, #004dff 64%, #750787 80%, #b4005a 100%);
}

/* ===== Pumpkin Spice Theme (Halloween) ===== */
html[data-theme='pumpkin-spice'] {
    --color-bg-top: #130e0a;
    --color-bg-base: #0e0a07;
    --color-surface: #1a1410;
    --color-surface-transparent: rgba(26, 20, 16, 0.5);
    --color-surface-alt: rgba(34, 27, 21, 0.3);
    --color-surface-block: #2b221b;
    --color-text: #f1e9e4;
    --color-text-muted: #c8bcb3;
    --color-icon-dim: #98897f;
    --color-brand: #ff8c2a;
    --color-brand-soft: #ffa959;
    --color-brand-border: rgba(255, 140, 42, 0.3);
    --color-accent: #a855f7;
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --color-shadow: rgba(0, 0, 0, 0.34);
    --focus-ring: 0 0 0 3px rgba(255, 140, 42, 0.28);
    --overlay-hover: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(255, 140, 42, 0.22);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 140, 42, 0.12);
    --border-strong: rgba(255, 140, 42, 0.22);
}

/* ===== Holly Jolly Theme (Christmas) ===== */
html[data-theme='holly-jolly'] {
    --color-bg-top: #0f1b16;
    --color-bg-base: #0a1410;
    --color-surface: #14231c;
    --color-surface-transparent: rgba(20, 35, 28, 0.5);
    --color-surface-alt: rgba(26, 45, 36, 0.3);
    --color-surface-block: #21382c;
    --color-text: #eef6f2;
    --color-text-muted: #c7d7cf;
    --color-icon-dim: #8ca196;
    --color-brand: #d84c4c;
    --color-brand-soft: #f87171;
    --color-brand-border: rgba(216, 76, 76, 0.3);
    --color-accent: #d6b25e;
    --color-danger: #ef4444;
    --color-success: #2ea76b;
    --color-shadow: rgba(0, 0, 0, 0.30);
    --focus-ring: 0 0 0 3px rgba(216, 76, 76, 0.28);
    --overlay-hover: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(216, 76, 76, 0.25);
    --border-faint: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(46, 167, 107, 0.15);
    --border-strong: rgba(216, 76, 76, 0.25);
    --accent-gold: #d6b25e;
}

/* ============================================================================
   7. BRAND & LANDING PAGE THEMES
   ============================================================================ */

/* ===== BioBaron Theme ===== */
html[data-theme='biobaron'] {
    --color-bg-top: #0e3b1a;
    --color-bg-base: #f0f7ec;
    --color-surface: #ffffff;
    --color-surface-transparent: rgba(255, 255, 255, 0.85);
    --color-surface-alt: rgba(27, 107, 46, 0.05);
    --color-surface-block: #ffffff;
    --color-text: #1a2e1f;
    --color-text-muted: #5a7a63;
    --color-brand: #1b6b2e;
    --color-brand-soft: #a8d86b;
    --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'] {
    --color-bg-top: #0a2540;
    --color-bg-base: #f7f9fc;
    --color-surface: #ffffff;
    --color-surface-transparent: rgba(255, 255, 255, 0.8);
    --color-surface-alt: rgba(0, 75, 135, 0.05);
    --color-surface-block: #ffffff;
    --color-text: #1a202c;
    --color-text-muted: #718096;
    --color-icon-dim: #a0aec0;
    --color-brand: #004b87;
    --color-accent: #00e676;
    --color-shadow: rgba(0, 0, 0, 0.08);
    --accent-gradient: linear-gradient(135deg, #00d4ff 0%, #00e676 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.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-transparent: rgba(10, 11, 16, 0.5);
    --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);
}

/* ===== JN Elétrica Theme ===== */
html[data-theme='jn_eletrica'] {
    --color-bg-top: #0d1f6e;
    --color-bg-base: #f4f7ff;
    --color-surface: #ffffff;
    --color-surface-transparent: rgba(255, 255, 255, 0.85);
    --color-surface-alt: rgba(26, 63, 212, 0.05);
    --color-surface-block: #ffffff;
    --color-text: #1a202c;
    --color-text-muted: #64748b;
    --color-brand: #1a3fd4;
    --color-accent: #ffd000;
    --color-shadow: rgba(26, 63, 212, 0.12);
    --accent-gradient: linear-gradient(135deg, #ffd000 0%, #ff6b00 100%);
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
}

/* ============================================================================
   8. THEME PREVIEW CARDS (Settings Panel / Theme Switcher)
   ============================================================================ */

/* Light Theme Preview */
[data-theme-set="light"] .theme-preview {
    background-color: #f6f7fb;
    border-color: #d1d5db;
}
[data-theme-set="light"] .preview-sidebar {
    background-color: #ffffff;
    border-right-color: #e5e7eb;
}
[data-theme-set="light"] .preview-header {
    background-color: #f3f4f6;
    border-bottom-color: #e5e7eb;
}
[data-theme-set="light"] .preview-content {
    background-color: #f9fafb;
}
[data-theme-set="light"] .preview-brand {
    background-color: #4f46e5;
}

/* Dark Theme Preview */
[data-theme-set="dark"] .theme-preview {
    background-color: #1e1e1e;
    border-color: #444;
}
[data-theme-set="dark"] .preview-sidebar {
    background-color: #282828;
    border-right-color: #333;
}
[data-theme-set="dark"] .preview-header {
    background-color: #282828;
    border-bottom-color: #333;
}
[data-theme-set="dark"] .preview-content {
    background-color: #1e1e1e;
}
[data-theme-set="dark"] .preview-brand {
    background-color: #4E46E5;
}

/* Abyss Theme Preview */
[data-theme-set="abyss"] .theme-preview {
    background-color: #13151f;
    border-color: #2a2e3f;
}
[data-theme-set="abyss"] .preview-sidebar {
    background-color: #1d202e;
    border-right-color: #2a2e3f;
}
[data-theme-set="abyss"] .preview-header {
    background-color: #1d202e;
    border-bottom-color: #2a2e3f;
}
[data-theme-set="abyss"] .preview-content {
    background-color: #13151f;
}
[data-theme-set="abyss"] .preview-brand {
    background-color: #4f46e5;
}

/* Violet Bloom Theme Preview */
[data-theme-set="violet-bloom"] .theme-preview {
    background-color: #1f1526;
    border-color: #3d2b4c;
}
[data-theme-set="violet-bloom"] .preview-sidebar {
    background-color: #2e1f3a;
    border-right-color: #3d2b4c;
}
[data-theme-set="violet-bloom"] .preview-header {
    background-color: #2e1f3a;
    border-bottom-color: #3d2b4c;
}
[data-theme-set="violet-bloom"] .preview-content {
    background-color: #1f1526;
}
[data-theme-set="violet-bloom"] .preview-brand {
    background-color: #a85ad4;
}

/* Samba Theme Preview */
[data-theme-set="samba"] .theme-preview {
    background-color: #130d1a;
    border-color: #2d1e3a;
}
[data-theme-set="samba"] .preview-sidebar {
    background-color: #1c1428;
    border-right-color: #2d1e3a;
}
[data-theme-set="samba"] .preview-header {
    background-color: #1c1428;
    border-bottom-color: #2d1e3a;
}
[data-theme-set="samba"] .preview-content {
    background-color: #130d1a;
}
[data-theme-set="samba"] .preview-brand {
    background-color: #D35AE8;
}

/* Black Piano Theme Preview */
[data-theme-set="black-piano"] .theme-preview {
    background-color: #0d0d0d;
    border-color: #262626;
}
[data-theme-set="black-piano"] .preview-sidebar {
    background-color: #161616;
    border-right-color: #262626;
}
[data-theme-set="black-piano"] .preview-header {
    background-color: #161616;
    border-bottom-color: #262626;
}
[data-theme-set="black-piano"] .preview-content {
    background-color: #0d0d0d;
}
[data-theme-set="black-piano"] .preview-brand {
    background-color: #4f46e5;
}

/* Matrix Theme Preview */
[data-theme-set="matrix"] .theme-preview {
    background-color: #000000;
    border-color: rgba(0, 255, 65, 0.3);
}
[data-theme-set="matrix"] .preview-sidebar {
    background-color: #0d0d0d;
    border-right-color: rgba(0, 255, 65, 0.2);
}
[data-theme-set="matrix"] .preview-header {
    background-color: #0d0d0d;
    border-bottom-color: rgba(0, 255, 65, 0.2);
}
[data-theme-set="matrix"] .preview-content {
    background-color: #000000;
}
[data-theme-set="matrix"] .preview-brand {
    background-color: #00ff41;
}

/* Fireworks Theme Preview */
[data-theme-set="fireworks"] .theme-preview {
    background-color: #0a0c10;
    border-color: #232936;
}
[data-theme-set="fireworks"] .preview-sidebar {
    background-color: #11141b;
    border-right-color: #232936;
}
[data-theme-set="fireworks"] .preview-header {
    background-color: #11141b;
    border-bottom-color: #232936;
}
[data-theme-set="fireworks"] .preview-content {
    background-color: #0a0c10;
}
[data-theme-set="fireworks"] .preview-brand {
    background-color: #d6b25e;
}

/* Pride Rainbow Theme Preview */
[data-theme-set="pride-rainbow"] .theme-preview {
    background-color: #0c0c11;
    border-color: #272738;
}
[data-theme-set="pride-rainbow"] .preview-sidebar {
    background-color: #15151e;
    border-right-color: #272738;
}
[data-theme-set="pride-rainbow"] .preview-header {
    background-color: #15151e;
    border-bottom-color: #272738;
}
[data-theme-set="pride-rainbow"] .preview-content {
    background-color: #0c0c11;
}
[data-theme-set="pride-rainbow"] .preview-brand {
    background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
}

/* Pumpkin Spice Theme Preview */
[data-theme-set="pumpkin-spice"] .theme-preview {
    background-color: #0e0a07;
    border-color: #2e1d14;
}
[data-theme-set="pumpkin-spice"] .preview-sidebar {
    background-color: #1a1410;
    border-right-color: #2e1d14;
}
[data-theme-set="pumpkin-spice"] .preview-header {
    background-color: #1a1410;
    border-bottom-color: #2e1d14;
}
[data-theme-set="pumpkin-spice"] .preview-content {
    background-color: #0e0a07;
}
[data-theme-set="pumpkin-spice"] .preview-brand {
    background-color: #ff8c2a;
}

/* Holly Jolly Theme Preview */
[data-theme-set="holly-jolly"] .theme-preview {
    background-color: #0a1410;
    border-color: #20352b;
}
[data-theme-set="holly-jolly"] .preview-sidebar {
    background-color: #14231c;
    border-right-color: #1a2e24;
}
[data-theme-set="holly-jolly"] .preview-header {
    background-color: #14231c;
    border-bottom-color: #1a2e24;
}
[data-theme-set="holly-jolly"] .preview-content {
    background-color: #0a1410;
}
[data-theme-set="holly-jolly"] .preview-brand {
    background-color: #d84c4c;
}

/* ============================================================================
   9. SPECIAL THEME VISUAL EFFECTS & ANIMATIONS
   ============================================================================ */

/* ----- Common Animations ----- */
@keyframes snow {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 400px 110vh, -400px 110vh, 200px 110vh;
    }
}

/* ----- Fireworks (New Year) Visuals ----- */
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);
}

@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;
    }
}

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

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;
    opacity: 0;
}

html[data-theme='fireworks']::before {
    left: 20%;
    top: 60px;
    animation: bang-gold 2.5s ease-out infinite backwards;
    animation-delay: 0.5s;
}

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

html[data-theme='fireworks'] .topbar::before {
    content: '';
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    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;
}

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;
}

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;
}

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

/* ----- Pumpkin Spice (Halloween) Visuals ----- */
.pumpkin-decoration {
    position: fixed;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 1000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='22' r='14' fill='%23ff6600' stroke='%23d45500' stroke-width='1'/%3E%3Cpath d='M19,8 Q22,8 20,4' fill='none' stroke='%232a5a2a' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%233a1a0a'%3E%3Cpath d='M14,18 L17,21 L11,21 Z'/%3E%3Cpath d='M26,18 L29,21 L23,21 Z'/%3E%3Cpath d='M13,26 Q20,32 27,26 L26,29 Q20,34 14,29 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: pumpkin-flicker 3s infinite alternate;
}

@keyframes pumpkin-flicker {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255, 165, 0, 0.3)) brightness(0.9);
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.6)) brightness(1.1);
        transform: scale(1.05);
    }
}

@keyframes bat-float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4px);
    }
}

html[data-theme='pumpkin-spice'] .topbar {
    box-shadow: 0 10px 40px -5px rgba(255, 120, 30, 0.1), 0 5px 15px -5px rgba(128, 0, 128, 0.15);
    z-index: 102;
}

html[data-theme='pumpkin-spice'] .topbar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 48px;
    pointer-events: none;
    z-index: 101;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='48' viewBox='0 0 100 48'%3E%3Cpath d='M10,10 Q25,35 50,10 T90,10' fill='none' stroke='%235E4B35' stroke-width='1' opacity='0.4'/%3E%3Cg transform='translate(25, 20) scale(0.6)'%3E%3Cpath d='M0,0 C-5,-5 -10,0 -15,-5 C-10,-10 -5,-5 0,-10 C5,-5 10,-10 15,-5 C10,0 5,-5 0,0 Z' fill='%231a1a1a' /%3E%3C/g%3E%3Cg transform='translate(75, 15) scale(0.8)'%3E%3Cpath d='M0,0 C-8,-5 -16,2 -20,-6 C-14,-10 -6,-6 0,-12 C6,-6 14,-10 20,-6 C16,2 8,-5 0,0 Z' fill='%232b1d14' /%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 48px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
    animation: bat-float 6s ease-in-out infinite alternate;
    opacity: 0.9;
}

html[data-theme='pumpkin-spice'] .brand {
    position: relative;
    z-index: 105;
}

html[data-theme='pumpkin-spice'] .brand::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -8px;
    width: 42px;
    height: 42px;
    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='s1'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='1' flood-color='rgba(0,0,0,0.4)'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M10,38 Q25,-5 40,38 Z' fill='%232a1a35' filter='url(%23s1)'/%3E%3Cpath d='M5,38 Q25,44 45,38' fill='none' stroke='%232a1a35' stroke-width='6' stroke-linecap='round' filter='url(%23s1)'/%3E%3Cpath d='M13,34 Q25,38 37,34' fill='none' stroke='%23ff6600' stroke-width='3' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: bottom center;
    transform: rotate(-15deg);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme='pumpkin-spice'] .brand:hover::after {
    animation: hat-wiggle 1s ease-in-out infinite;
}

.sidebar:not(.collapsed) html[data-theme='pumpkin-spice'] .brand::after,
html[data-theme='pumpkin-spice'] .sidebar:not(.collapsed) .brand::after {
    transform: rotate(-25deg) scale(1.1) translateX(2px);
}

/* ----- Holly Jolly (Christmas) Visuals ----- */
html[data-theme='holly-jolly'] .topbar {
    overflow: visible;
    box-shadow: 0 10px 50px -5px rgba(255, 223, 56, 0.15);
    z-index: 102;
}

html[data-theme='holly-jolly'] .topbar::before {
    content: '';
    position: fixed;
    top: 56px;
    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;
}

@keyframes light-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

html[data-theme='holly-jolly'] .topbar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 101;
    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 3px rgba(0, 0, 0, 0.3));
    animation: light-bounce 3s ease-in-out infinite;
    transform-origin: top center;
}

html[data-theme='holly-jolly'] .brand {
    position: relative;
    z-index: 105;
}

html[data-theme='holly-jolly'] .brand::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0px;
    width: 34px;
    height: 34px;
    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%3Cpath d='M10,38 Q5,20 25,5 Q45,20 40,38 Z' fill='url(%23g1)' filter='url(%23f1)'/%3E%3Cpath d='M25,5 Q35,5 42,15 L38,18 Q32,8 25,5' fill='url(%23g1)'/%3E%3Cpath d='M8,36 Q25,42 42,36 L42,42 Q25,48 8,42 Z' fill='%23fff' filter='url(%23f1)'/%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);
}

@keyframes hat-wiggle {
    0%, 100% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(-10deg);
    }
}

@keyframes hat-wiggle-tipped {
    0%, 100% {
        transform: rotate(-45deg) scale(1.1) translateX(4px);
    }
    50% {
        transform: rotate(-35deg) scale(1.1) translateX(4px);
    }
}

.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);
}

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

html[data-theme='holly-jolly'] .sidebar:not(.collapsed) .brand:hover::after {
    animation: hat-wiggle-tipped 1s ease-in-out infinite;
}