/* ===========================================
   SISTEMA DE TEMAS - TOKENS GLOBAIS
   =========================================== */

:root {
    --app-bg: #e8f2fa;
    --app-text: #1f2937;
    --app-primary: #1a6d9f;
    --app-primary-dark: #0f4a72;
    --app-primary-light: #ecf7ff;
    --app-accent: #2eb8b8;

    --color-primary-50: #ecf7ff;
    --color-primary-100: #d3efff;
    --color-primary-200: #a7dfff;
    --color-primary-300: #7bcbff;
    --color-primary-400: #4eb7ff;
    --color-primary-500: #2e9cde;
    --color-primary-600: #1e7fb8;
    --color-primary-700: #1a6d9f;
    --color-primary-800: #0f4a72;
    --color-primary-900: #092d47;

    --color-accent-500: #2eb8b8;
    --color-accent-600: #1fa5a5;

    --color-primary-start: #1a6d9f;
    --color-primary-center: #2eb8b8;
    --color-primary-end: #6fe7dd;

    --gradient-primary: linear-gradient(180deg, #1a6d9f 0%, #2eb8b8 50%, #6fe7dd 100%);
    --gradient-primary-hover: linear-gradient(180deg, #155a85 0%, #26a0a0 50%, #5dd5cb 100%);
}

[data-theme="blue"] {
    --app-bg: #e8f2fa;
    --app-text: #1f2937;
    --app-primary: #1a6d9f;
    --app-primary-dark: #0f4a72;
    --app-primary-light: #ecf7ff;
    --app-accent: #2eb8b8;

    --color-primary-50: #ecf7ff;
    --color-primary-100: #d3efff;
    --color-primary-200: #a7dfff;
    --color-primary-300: #7bcbff;
    --color-primary-400: #4eb7ff;
    --color-primary-500: #2e9cde;
    --color-primary-600: #1e7fb8;
    --color-primary-700: #1a6d9f;
    --color-primary-800: #0f4a72;
    --color-primary-900: #092d47;

    --color-accent-500: #2eb8b8;
    --color-accent-600: #1fa5a5;

    --color-primary-start: #1a6d9f;
    --color-primary-center: #2eb8b8;
    --color-primary-end: #6fe7dd;

    --gradient-primary: linear-gradient(180deg, #1a6d9f 0%, #2eb8b8 50%, #6fe7dd 100%);
    --gradient-primary-hover: linear-gradient(180deg, #155a85 0%, #26a0a0 50%, #5dd5cb 100%);
}

[data-theme="light-blue"] {
    --app-bg: #e1f5fe;
    --app-text: #1f2937;
    --app-primary: #0288d1;
    --app-primary-dark: #01579b;
    --app-primary-light: #e1f5fe;
    --app-accent: #03a9f4;

    --color-primary-50: #e1f5fe;
    --color-primary-100: #b3e5fc;
    --color-primary-200: #81d4fa;
    --color-primary-300: #4fc3f7;
    --color-primary-400: #29b6f6;
    --color-primary-500: #03a9f4;
    --color-primary-600: #039be5;
    --color-primary-700: #0288d1;
    --color-primary-800: #0277bd;
    --color-primary-900: #01579b;

    --color-accent-500: #03a9f4;
    --color-accent-600: #039be5;

    --color-primary-start: #0288d1;
    --color-primary-center: #03a9f4;
    --color-primary-end: #4fc3f7;

    --gradient-primary: linear-gradient(180deg, #0288d1 0%, #03a9f4 50%, #4fc3f7 100%);
    --gradient-primary-hover: linear-gradient(180deg, #0277bd 0%, #039be5 50%, #29b6f6 100%);
}

[data-theme="indigo"] {
    --app-bg: #e8eaf6;
    --app-text: #1f2937;
    --app-primary: #303f9f;
    --app-primary-dark: #1a237e;
    --app-primary-light: #e8eaf6;
    --app-accent: #3f51b5;

    --color-primary-50: #e8eaf6;
    --color-primary-100: #c5cae9;
    --color-primary-200: #9fa8da;
    --color-primary-300: #7986cb;
    --color-primary-400: #5c6bc0;
    --color-primary-500: #3f51b5;
    --color-primary-600: #3949ab;
    --color-primary-700: #303f9f;
    --color-primary-800: #283593;
    --color-primary-900: #1a237e;

    --color-accent-500: #3f51b5;
    --color-accent-600: #3949ab;

    --color-primary-start: #303f9f;
    --color-primary-center: #3f51b5;
    --color-primary-end: #7986cb;

    --gradient-primary: linear-gradient(180deg, #303f9f 0%, #3f51b5 50%, #7986cb 100%);
    --gradient-primary-hover: linear-gradient(180deg, #283593 0%, #3949ab 50%, #5c6bc0 100%);
}

[data-theme="deep-purple"] {
    --app-bg: #ede7f6;
    --app-text: #1f2937;
    --app-primary: #512da8;
    --app-primary-dark: #311b92;
    --app-primary-light: #ede7f6;
    --app-accent: #673ab7;

    --color-primary-50: #ede7f6;
    --color-primary-100: #d1c4e9;
    --color-primary-200: #b39ddb;
    --color-primary-300: #9575cd;
    --color-primary-400: #7e57c2;
    --color-primary-500: #673ab7;
    --color-primary-600: #5e35b1;
    --color-primary-700: #512da8;
    --color-primary-800: #4527a0;
    --color-primary-900: #311b92;

    --color-accent-500: #673ab7;
    --color-accent-600: #5e35b1;

    --color-primary-start: #512da8;
    --color-primary-center: #673ab7;
    --color-primary-end: #9575cd;

    --gradient-primary: linear-gradient(180deg, #512da8 0%, #673ab7 50%, #9575cd 100%);
    --gradient-primary-hover: linear-gradient(180deg, #4527a0 0%, #5e35b1 50%, #7e57c2 100%);
}

[data-theme="purple"] {
    --app-bg: #f3e5f5;
    --app-text: #1f2937;
    --app-primary: #7b1fa2;
    --app-primary-dark: #4a148c;
    --app-primary-light: #f3e5f5;
    --app-accent: #9c27b0;

    --color-primary-50: #f3e5f5;
    --color-primary-100: #e1bee7;
    --color-primary-200: #ce93d8;
    --color-primary-300: #ba68c8;
    --color-primary-400: #ab47bc;
    --color-primary-500: #9c27b0;
    --color-primary-600: #8e24aa;
    --color-primary-700: #7b1fa2;
    --color-primary-800: #6a1b9a;
    --color-primary-900: #4a148c;

    --color-accent-500: #9c27b0;
    --color-accent-600: #8e24aa;

    --color-primary-start: #7b1fa2;
    --color-primary-center: #9c27b0;
    --color-primary-end: #ba68c8;

    --gradient-primary: linear-gradient(180deg, #7b1fa2 0%, #9c27b0 50%, #ba68c8 100%);
    --gradient-primary-hover: linear-gradient(180deg, #6a1b9a 0%, #8e24aa 50%, #ab47bc 100%);
}

[data-theme="pink"] {
    --app-bg: #fce4ec;
    --app-text: #1f2937;
    --app-primary: #c2185b;
    --app-primary-dark: #880e4f;
    --app-primary-light: #fce4ec;
    --app-accent: #e91e63;

    --color-primary-50: #fce4ec;
    --color-primary-100: #f8bbd0;
    --color-primary-200: #f48fb1;
    --color-primary-300: #f06292;
    --color-primary-400: #ec407a;
    --color-primary-500: #e91e63;
    --color-primary-600: #d81b60;
    --color-primary-700: #c2185b;
    --color-primary-800: #ad1457;
    --color-primary-900: #880e4f;

    --color-accent-500: #e91e63;
    --color-accent-600: #d81b60;

    --color-primary-start: #c2185b;
    --color-primary-center: #e91e63;
    --color-primary-end: #f06292;

    --gradient-primary: linear-gradient(180deg, #c2185b 0%, #e91e63 50%, #f06292 100%);
    --gradient-primary-hover: linear-gradient(180deg, #ad1457 0%, #d81b60 50%, #ec407a 100%);
}

[data-theme="red"] {
    --app-bg: #ffebee;
    --app-text: #1f2937;
    --app-primary: #d32f2f;
    --app-primary-dark: #b71c1c;
    --app-primary-light: #ffebee;
    --app-accent: #f44336;

    --color-primary-50: #ffebee;
    --color-primary-100: #ffcdd2;
    --color-primary-200: #ef9a9a;
    --color-primary-300: #e57373;
    --color-primary-400: #ef5350;
    --color-primary-500: #f44336;
    --color-primary-600: #e53935;
    --color-primary-700: #d32f2f;
    --color-primary-800: #c62828;
    --color-primary-900: #b71c1c;

    --color-accent-500: #f44336;
    --color-accent-600: #e53935;

    --color-primary-start: #d32f2f;
    --color-primary-center: #f44336;
    --color-primary-end: #e57373;

    --gradient-primary: linear-gradient(180deg, #d32f2f 0%, #f44336 50%, #e57373 100%);
    --gradient-primary-hover: linear-gradient(180deg, #c62828 0%, #e53935 50%, #ef5350 100%);
}

[data-theme="green"] {
    --app-bg: #e9f7f0;
    --app-text: #1f2937;
    --app-primary: #1f7a4d;
    --app-primary-dark: #14593a;
    --app-primary-light: #effcf4;
    --app-accent: #5cc08a;

    --color-primary-50: #effcf4;
    --color-primary-100: #d6f5e4;
    --color-primary-200: #b3ebca;
    --color-primary-300: #89ddad;
    --color-primary-400: #5fcd8f;
    --color-primary-500: #36a671;
    --color-primary-600: #2a8f5e;
    --color-primary-700: #1f7a4d;
    --color-primary-800: #14593a;
    --color-primary-900: #0c3d28;

    --color-accent-500: #5cc08a;
    --color-accent-600: #3da772;

    --color-primary-start: #1f7a4d;
    --color-primary-center: #3da772;
    --color-primary-end: #7ed7a5;

    --gradient-primary: linear-gradient(180deg, #1f7a4d 0%, #3da772 50%, #7ed7a5 100%);
    --gradient-primary-hover: linear-gradient(180deg, #18623d 0%, #338e60 50%, #68c594 100%);
}

[data-theme="light-green"] {
    --app-bg: #f1f8e9;
    --app-text: #1f2937;
    --app-primary: #689f38;
    --app-primary-dark: #33691e;
    --app-primary-light: #f1f8e9;
    --app-accent: #8bc34a;

    --color-primary-50: #f1f8e9;
    --color-primary-100: #dcedc8;
    --color-primary-200: #c5e1a5;
    --color-primary-300: #aed581;
    --color-primary-400: #9ccc65;
    --color-primary-500: #8bc34a;
    --color-primary-600: #7cb342;
    --color-primary-700: #689f38;
    --color-primary-800: #558b2f;
    --color-primary-900: #33691e;

    --color-accent-500: #8bc34a;
    --color-accent-600: #7cb342;

    --color-primary-start: #689f38;
    --color-primary-center: #8bc34a;
    --color-primary-end: #aed581;

    --gradient-primary: linear-gradient(180deg, #689f38 0%, #8bc34a 50%, #aed581 100%);
    --gradient-primary-hover: linear-gradient(180deg, #558b2f 0%, #7cb342 50%, #9ccc65 100%);
}

[data-theme="teal"] {
    --app-bg: #e0f2f1;
    --app-text: #1f2937;
    --app-primary: #00796b;
    --app-primary-dark: #004d40;
    --app-primary-light: #e0f2f1;
    --app-accent: #009688;

    --color-primary-50: #e0f2f1;
    --color-primary-100: #b2dfdb;
    --color-primary-200: #80cbc4;
    --color-primary-300: #4db6ac;
    --color-primary-400: #26a69a;
    --color-primary-500: #009688;
    --color-primary-600: #00897b;
    --color-primary-700: #00796b;
    --color-primary-800: #00695c;
    --color-primary-900: #004d40;

    --color-accent-500: #009688;
    --color-accent-600: #00897b;

    --color-primary-start: #00796b;
    --color-primary-center: #009688;
    --color-primary-end: #4db6ac;

    --gradient-primary: linear-gradient(180deg, #00796b 0%, #009688 50%, #4db6ac 100%);
    --gradient-primary-hover: linear-gradient(180deg, #00695c 0%, #00897b 50%, #26a69a 100%);
}

[data-theme="lime"] {
    --app-bg: #f9fbe7;
    --app-text: #1f2937;
    --app-primary: #a4b42b;
    --app-primary-dark: #827717;
    --app-primary-light: #f9fbe7;
    --app-accent: #cddc39;

    --color-primary-50: #f9fbe7;
    --color-primary-100: #f0f4c3;
    --color-primary-200: #e6ee9c;
    --color-primary-300: #dce775;
    --color-primary-400: #d4e157;
    --color-primary-500: #cddc39;
    --color-primary-600: #c0ca33;
    --color-primary-700: #a4b42b;
    --color-primary-800: #9e9d24;
    --color-primary-900: #827717;

    --color-accent-500: #cddc39;
    --color-accent-600: #c0ca33;

    --color-primary-start: #a4b42b;
    --color-primary-center: #cddc39;
    --color-primary-end: #dce775;

    --gradient-primary: linear-gradient(180deg, #a4b42b 0%, #cddc39 50%, #dce775 100%);
    --gradient-primary-hover: linear-gradient(180deg, #9e9d24 0%, #c0ca33 50%, #d4e157 100%);
}

[data-theme="cyan"] {
    --app-bg: #e6f9fb;
    --app-text: #1f2937;
    --app-primary: #008aa6;
    --app-primary-dark: #00657a;
    --app-primary-light: #e5fbff;
    --app-accent: #00c2d1;

    --color-primary-50: #e5fbff;
    --color-primary-100: #c4f3fa;
    --color-primary-200: #9be7f2;
    --color-primary-300: #6fd9e8;
    --color-primary-400: #3fc9dc;
    --color-primary-500: #1bb7d6;
    --color-primary-600: #00a0bf;
    --color-primary-700: #008aa6;
    --color-primary-800: #00657a;
    --color-primary-900: #004552;

    --color-accent-500: #00c2d1;
    --color-accent-600: #00a7b5;

    --color-primary-start: #008aa6;
    --color-primary-center: #00b0c7;
    --color-primary-end: #6de4ef;

    --gradient-primary: linear-gradient(180deg, #008aa6 0%, #00b0c7 50%, #6de4ef 100%);
    --gradient-primary-hover: linear-gradient(180deg, #00718a 0%, #0094a8 50%, #55d3de 100%);
}

[data-theme="canary"] {
    --app-bg: #fff7d6;
    --app-text: #1f2937;
    --app-primary: #caa200;
    --app-primary-dark: #9c7a00;
    --app-primary-light: #fff4bf;
    --app-accent: #f8d35a;

    --color-primary-50: #fff4bf;
    --color-primary-100: #ffec99;
    --color-primary-200: #ffe066;
    --color-primary-300: #ffd43b;
    --color-primary-400: #f2c200;
    --color-primary-500: #e6b200;
    --color-primary-600: #d6b300;
    --color-primary-700: #caa200;
    --color-primary-800: #9c7a00;
    --color-primary-900: #6b5200;

    --color-accent-500: #f8d35a;
    --color-accent-600: #e8c043;

    --color-primary-start: #caa200;
    --color-primary-center: #f2c200;
    --color-primary-end: #ffe08a;

    --gradient-primary: linear-gradient(180deg, #caa200 0%, #f2c200 50%, #ffe08a 100%);
    --gradient-primary-hover: linear-gradient(180deg, #b18e00 0%, #d6ad00 50%, #f3d377 100%);
}

[data-theme="amber"] {
    --app-bg: #fff8e1;
    --app-text: #1f2937;
    --app-primary: #ffa000;
    --app-primary-dark: #ff6f00;
    --app-primary-light: #fff8e1;
    --app-accent: #ffc107;

    --color-primary-50: #fff8e1;
    --color-primary-100: #ffecb3;
    --color-primary-200: #ffe082;
    --color-primary-300: #ffd54f;
    --color-primary-400: #ffca28;
    --color-primary-500: #ffc107;
    --color-primary-600: #ffb300;
    --color-primary-700: #ffa000;
    --color-primary-800: #ff8f00;
    --color-primary-900: #ff6f00;

    --color-accent-500: #ffc107;
    --color-accent-600: #ffb300;

    --color-primary-start: #ffa000;
    --color-primary-center: #ffc107;
    --color-primary-end: #ffd54f;

    --gradient-primary: linear-gradient(180deg, #ffa000 0%, #ffc107 50%, #ffd54f 100%);
    --gradient-primary-hover: linear-gradient(180deg, #ff8f00 0%, #ffb300 50%, #ffca28 100%);
}

[data-theme="orange"] {
    --app-bg: #fff3e0;
    --app-text: #1f2937;
    --app-primary: #f57c00;
    --app-primary-dark: #e65100;
    --app-primary-light: #fff3e0;
    --app-accent: #ff9800;

    --color-primary-50: #fff3e0;
    --color-primary-100: #ffe0b2;
    --color-primary-200: #ffcc80;
    --color-primary-300: #ffb74d;
    --color-primary-400: #ffa726;
    --color-primary-500: #ff9800;
    --color-primary-600: #fb8c00;
    --color-primary-700: #f57c00;
    --color-primary-800: #ef6c00;
    --color-primary-900: #e65100;

    --color-accent-500: #ff9800;
    --color-accent-600: #fb8c00;

    --color-primary-start: #f57c00;
    --color-primary-center: #ff9800;
    --color-primary-end: #ffb74d;

    --gradient-primary: linear-gradient(180deg, #f57c00 0%, #ff9800 50%, #ffb74d 100%);
    --gradient-primary-hover: linear-gradient(180deg, #ef6c00 0%, #fb8c00 50%, #ffa726 100%);
}

[data-theme="crimson"] {
    --app-bg: #fdecef;
    --app-text: #1f2937;
    --app-primary: #9b1b30;
    --app-primary-dark: #6f0f22;
    --app-primary-light: #fff1f3;
    --app-accent: #e35d6a;

    --color-primary-50: #fff1f3;
    --color-primary-100: #ffd9df;
    --color-primary-200: #fcb2bc;
    --color-primary-300: #f28a98;
    --color-primary-400: #e35d6a;
    --color-primary-500: #cf3a4e;
    --color-primary-600: #b9253c;
    --color-primary-700: #9b1b30;
    --color-primary-800: #6f0f22;
    --color-primary-900: #4a0817;

    --color-accent-500: #e35d6a;
    --color-accent-600: #cf3a4e;

    --color-primary-start: #9b1b30;
    --color-primary-center: #cf3a4e;
    --color-primary-end: #f29aa6;

    --gradient-primary: linear-gradient(180deg, #9b1b30 0%, #cf3a4e 50%, #f29aa6 100%);
    --gradient-primary-hover: linear-gradient(180deg, #861728 0%, #b13242 50%, #e38593 100%);
}

/* ===========================================
   DARK MODE - TEMAS ESCUROS (16 variantes)
   =========================================== */

[data-theme="blue-dark"] {
    --app-bg: #0f1419;
    --app-text: #e0e0e0;
    --app-primary: #4eb7ff;
    --app-primary-dark: #2e9cde;
    --app-primary-light: #a7dfff;
    --app-accent: #6fe7dd;

    --color-primary-50: #092d47;
    --color-primary-100: #0f4a72;
    --color-primary-200: #1a6d9f;
    --color-primary-300: #2e9cde;
    --color-primary-400: #4eb7ff;
    --color-primary-500: #7bcbff;
    --color-primary-600: #a7dfff;
    --color-primary-700: #d3efff;
    --color-primary-800: #ecf7ff;
    --color-primary-900: #ffffff;

    --color-accent-500: #6fe7dd;
    --color-accent-600: #a7f0e6;

    --color-primary-start: #4eb7ff;
    --color-primary-center: #6fe7dd;
    --color-primary-end: #a7f0e6;

    --gradient-primary: linear-gradient(180deg, #4eb7ff 0%, #6fe7dd 50%, #a7f0e6 100%);
    --gradient-primary-hover: linear-gradient(180deg, #2e9cde 0%, #5dd5cb 50%, #b8f3ed 100%);
}

[data-theme="light-blue-dark"] {
    --app-bg: #0d1b2a;
    --app-text: #e0e0e0;
    --app-primary: #29b6f6;
    --app-primary-dark: #03a9f4;
    --app-primary-light: #81d4fa;
    --app-accent: #4fc3f7;

    --color-primary-50: #01579b;
    --color-primary-100: #0277bd;
    --color-primary-200: #0288d1;
    --color-primary-300: #039be5;
    --color-primary-400: #03a9f4;
    --color-primary-500: #4fc3f7;
    --color-primary-600: #81d4fa;
    --color-primary-700: #b3e5fc;
    --color-primary-800: #e1f5fe;
    --color-primary-900: #ffffff;

    --color-accent-500: #4fc3f7;
    --color-accent-600: #81d4fa;

    --color-primary-start: #29b6f6;
    --color-primary-center: #4fc3f7;
    --color-primary-end: #81d4fa;

    --gradient-primary: linear-gradient(180deg, #29b6f6 0%, #4fc3f7 50%, #81d4fa 100%);
    --gradient-primary-hover: linear-gradient(180deg, #03a9f4 0%, #039be5 50%, #4fc3f7 100%);
}

[data-theme="indigo-dark"] {
    --app-bg: #0d0d1f;
    --app-text: #e0e0e0;
    --app-primary: #5c6bc0;
    --app-primary-dark: #3f51b5;
    --app-primary-light: #9fa8da;
    --app-accent: #7986cb;

    --color-primary-50: #1a237e;
    --color-primary-100: #283593;
    --color-primary-200: #303f9f;
    --color-primary-300: #3949ab;
    --color-primary-400: #3f51b5;
    --color-primary-500: #7986cb;
    --color-primary-600: #9fa8da;
    --color-primary-700: #c5cae9;
    --color-primary-800: #e8eaf6;
    --color-primary-900: #ffffff;

    --color-accent-500: #7986cb;
    --color-accent-600: #9fa8da;

    --color-primary-start: #5c6bc0;
    --color-primary-center: #7986cb;
    --color-primary-end: #9fa8da;

    --gradient-primary: linear-gradient(180deg, #5c6bc0 0%, #7986cb 50%, #9fa8da 100%);
    --gradient-primary-hover: linear-gradient(180deg, #3f51b5 0%, #3949ab 50%, #5c6bc0 100%);
}

[data-theme="deep-purple-dark"] {
    --app-bg: #140922;
    --app-text: #e0e0e0;
    --app-primary: #7e57c2;
    --app-primary-dark: #673ab7;
    --app-primary-light: #b39ddb;
    --app-accent: #9575cd;

    --color-primary-50: #311b92;
    --color-primary-100: #4527a0;
    --color-primary-200: #512da8;
    --color-primary-300: #5e35b1;
    --color-primary-400: #673ab7;
    --color-primary-500: #9575cd;
    --color-primary-600: #b39ddb;
    --color-primary-700: #d1c4e9;
    --color-primary-800: #ede7f6;
    --color-primary-900: #ffffff;

    --color-accent-500: #9575cd;
    --color-accent-600: #b39ddb;

    --color-primary-start: #7e57c2;
    --color-primary-center: #9575cd;
    --color-primary-end: #b39ddb;

    --gradient-primary: linear-gradient(180deg, #7e57c2 0%, #9575cd 50%, #b39ddb 100%);
    --gradient-primary-hover: linear-gradient(180deg, #673ab7 0%, #5e35b1 50%, #7e57c2 100%);
}

[data-theme="purple-dark"] {
    --app-bg: #190024;
    --app-text: #e0e0e0;
    --app-primary: #ab47bc;
    --app-primary-dark: #9c27b0;
    --app-primary-light: #ce93d8;
    --app-accent: #ba68c8;

    --color-primary-50: #4a148c;
    --color-primary-100: #6a1b9a;
    --color-primary-200: #7b1fa2;
    --color-primary-300: #8e24aa;
    --color-primary-400: #9c27b0;
    --color-primary-500: #ba68c8;
    --color-primary-600: #ce93d8;
    --color-primary-700: #e1bee7;
    --color-primary-800: #f3e5f5;
    --color-primary-900: #ffffff;

    --color-accent-500: #ba68c8;
    --color-accent-600: #ce93d8;

    --color-primary-start: #ab47bc;
    --color-primary-center: #ba68c8;
    --color-primary-end: #ce93d8;

    --gradient-primary: linear-gradient(180deg, #ab47bc 0%, #ba68c8 50%, #ce93d8 100%);
    --gradient-primary-hover: linear-gradient(180deg, #9c27b0 0%, #8e24aa 50%, #ab47bc 100%);
}

[data-theme="pink-dark"] {
    --app-bg: #250014;
    --app-text: #e0e0e0;
    --app-primary: #ec407a;
    --app-primary-dark: #e91e63;
    --app-primary-light: #f48fb1;
    --app-accent: #f06292;

    --color-primary-50: #880e4f;
    --color-primary-100: #ad1457;
    --color-primary-200: #c2185b;
    --color-primary-300: #d81b60;
    --color-primary-400: #e91e63;
    --color-primary-500: #f06292;
    --color-primary-600: #f48fb1;
    --color-primary-700: #f8bbd0;
    --color-primary-800: #fce4ec;
    --color-primary-900: #ffffff;

    --color-accent-500: #f06292;
    --color-accent-600: #f48fb1;

    --color-primary-start: #ec407a;
    --color-primary-center: #f06292;
    --color-primary-end: #f48fb1;

    --gradient-primary: linear-gradient(180deg, #ec407a 0%, #f06292 50%, #f48fb1 100%);
    --gradient-primary-hover: linear-gradient(180deg, #e91e63 0%, #d81b60 50%, #ec407a 100%);
}

[data-theme="red-dark"] {
    --app-bg: #220707;
    --app-text: #e0e0e0;
    --app-primary: #ef5350;
    --app-primary-dark: #f44336;
    --app-primary-light: #e57373;
    --app-accent: #ef9a9a;

    --color-primary-50: #b71c1c;
    --color-primary-100: #c62828;
    --color-primary-200: #d32f2f;
    --color-primary-300: #e53935;
    --color-primary-400: #f44336;
    --color-primary-500: #e57373;
    --color-primary-600: #ef9a9a;
    --color-primary-700: #ffcdd2;
    --color-primary-800: #ffebee;
    --color-primary-900: #ffffff;

    --color-accent-500: #ef9a9a;
    --color-accent-600: #ffcdd2;

    --color-primary-start: #ef5350;
    --color-primary-center: #ef9a9a;
    --color-primary-end: #ffcdd2;

    --gradient-primary: linear-gradient(180deg, #ef5350 0%, #ef9a9a 50%, #ffcdd2 100%);
    --gradient-primary-hover: linear-gradient(180deg, #f44336 0%, #e53935 50%, #ef5350 100%);
}

[data-theme="green-dark"] {
    --app-bg: #0a1f1a;
    --app-text: #e0e0e0;
    --app-primary: #5fcd8f;
    --app-primary-dark: #36a671;
    --app-primary-light: #89ddad;
    --app-accent: #7ed7a5;

    --color-primary-50: #0c3d28;
    --color-primary-100: #14593a;
    --color-primary-200: #1f7a4d;
    --color-primary-300: #2a8f5e;
    --color-primary-400: #36a671;
    --color-primary-500: #89ddad;
    --color-primary-600: #b3ebca;
    --color-primary-700: #d6f5e4;
    --color-primary-800: #effcf4;
    --color-primary-900: #ffffff;

    --color-accent-500: #7ed7a5;
    --color-accent-600: #b3ebca;

    --color-primary-start: #5fcd8f;
    --color-primary-center: #7ed7a5;
    --color-primary-end: #b3ebca;

    --gradient-primary: linear-gradient(180deg, #5fcd8f 0%, #7ed7a5 50%, #b3ebca 100%);
    --gradient-primary-hover: linear-gradient(180deg, #36a671 0%, #2a8f5e 50%, #5fcd8f 100%);
}

[data-theme="light-green-dark"] {
    --app-bg: #151d0a;
    --app-text: #e0e0e0;
    --app-primary: #9ccc65;
    --app-primary-dark: #8bc34a;
    --app-primary-light: #aed581;
    --app-accent: #c5e1a5;

    --color-primary-50: #33691e;
    --color-primary-100: #558b2f;
    --color-primary-200: #689f38;
    --color-primary-300: #7cb342;
    --color-primary-400: #8bc34a;
    --color-primary-500: #aed581;
    --color-primary-600: #c5e1a5;
    --color-primary-700: #dcedc8;
    --color-primary-800: #f1f8e9;
    --color-primary-900: #ffffff;

    --color-accent-500: #c5e1a5;
    --color-accent-600: #dcedc8;

    --color-primary-start: #9ccc65;
    --color-primary-center: #aed581;
    --color-primary-end: #c5e1a5;

    --gradient-primary: linear-gradient(180deg, #9ccc65 0%, #aed581 50%, #c5e1a5 100%);
    --gradient-primary-hover: linear-gradient(180deg, #8bc34a 0%, #7cb342 50%, #9ccc65 100%);
}

[data-theme="teal-dark"] {
    --app-bg: #001816;
    --app-text: #e0e0e0;
    --app-primary: #26a69a;
    --app-primary-dark: #009688;
    --app-primary-light: #4db6ac;
    --app-accent: #80cbc4;

    --color-primary-50: #004d40;
    --color-primary-100: #00695c;
    --color-primary-200: #00796b;
    --color-primary-300: #00897b;
    --color-primary-400: #009688;
    --color-primary-500: #4db6ac;
    --color-primary-600: #80cbc4;
    --color-primary-700: #b2dfdb;
    --color-primary-800: #e0f2f1;
    --color-primary-900: #ffffff;

    --color-accent-500: #80cbc4;
    --color-accent-600: #b2dfdb;

    --color-primary-start: #26a69a;
    --color-primary-center: #4db6ac;
    --color-primary-end: #80cbc4;

    --gradient-primary: linear-gradient(180deg, #26a69a 0%, #4db6ac 50%, #80cbc4 100%);
    --gradient-primary-hover: linear-gradient(180deg, #009688 0%, #00897b 50%, #26a69a 100%);
}

[data-theme="lime-dark"] {
    --app-bg: #16180a;
    --app-text: #e0e0e0;
    --app-primary: #d4e157;
    --app-primary-dark: #cddc39;
    --app-primary-light: #dce775;
    --app-accent: #e6ee9c;

    --color-primary-50: #827717;
    --color-primary-100: #9e9d24;
    --color-primary-200: #a4b42b;
    --color-primary-300: #c0ca33;
    --color-primary-400: #cddc39;
    --color-primary-500: #dce775;
    --color-primary-600: #e6ee9c;
    --color-primary-700: #f0f4c3;
    --color-primary-800: #f9fbe7;
    --color-primary-900: #ffffff;

    --color-accent-500: #e6ee9c;
    --color-accent-600: #f0f4c3;

    --color-primary-start: #d4e157;
    --color-primary-center: #dce775;
    --color-primary-end: #e6ee9c;

    --gradient-primary: linear-gradient(180deg, #d4e157 0%, #dce775 50%, #e6ee9c 100%);
    --gradient-primary-hover: linear-gradient(180deg, #cddc39 0%, #c0ca33 50%, #d4e157 100%);
}

[data-theme="cyan-dark"] {
    --app-bg: #001820;
    --app-text: #e0e0e0;
    --app-primary: #3fc9dc;
    --app-primary-dark: #1bb7d6;
    --app-primary-light: #6fd9e8;
    --app-accent: #6de4ef;

    --color-primary-50: #004552;
    --color-primary-100: #00657a;
    --color-primary-200: #008aa6;
    --color-primary-300: #00a0bf;
    --color-primary-400: #1bb7d6;
    --color-primary-500: #6fd9e8;
    --color-primary-600: #9be7f2;
    --color-primary-700: #c4f3fa;
    --color-primary-800: #e5fbff;
    --color-primary-900: #ffffff;

    --color-accent-500: #6de4ef;
    --color-accent-600: #9be7f2;

    --color-primary-start: #3fc9dc;
    --color-primary-center: #6fd9e8;
    --color-primary-end: #9be7f2;

    --gradient-primary: linear-gradient(180deg, #3fc9dc 0%, #6fd9e8 50%, #9be7f2 100%);
    --gradient-primary-hover: linear-gradient(180deg, #1bb7d6 0%, #00a0bf 50%, #3fc9dc 100%);
}

[data-theme="canary-dark"] {
    --app-bg: #1f1800;
    --app-text: #e0e0e0;
    --app-primary: #ffd43b;
    --app-primary-dark: #f8d35a;
    --app-primary-light: #ffe066;
    --app-accent: #ffec99;

    --color-primary-50: #6b5200;
    --color-primary-100: #9c7a00;
    --color-primary-200: #caa200;
    --color-primary-300: #d6b300;
    --color-primary-400: #e6b200;
    --color-primary-500: #ffd43b;
    --color-primary-600: #ffe066;
    --color-primary-700: #ffec99;
    --color-primary-800: #fff4bf;
    --color-primary-900: #ffffff;

    --color-accent-500: #ffec99;
    --color-accent-600: #fff4bf;

    --color-primary-start: #ffd43b;
    --color-primary-center: #ffe066;
    --color-primary-end: #ffec99;

    --gradient-primary: linear-gradient(180deg, #ffd43b 0%, #ffe066 50%, #ffec99 100%);
    --gradient-primary-hover: linear-gradient(180deg, #f8d35a 0%, #e6b200 50%, #ffd43b 100%);
}

[data-theme="amber-dark"] {
    --app-bg: #1f1000;
    --app-text: #e0e0e0;
    --app-primary: #ffca28;
    --app-primary-dark: #ffc107;
    --app-primary-light: #ffd54f;
    --app-accent: #ffe082;

    --color-primary-50: #ff6f00;
    --color-primary-100: #ff8f00;
    --color-primary-200: #ffa000;
    --color-primary-300: #ffb300;
    --color-primary-400: #ffc107;
    --color-primary-500: #ffd54f;
    --color-primary-600: #ffe082;
    --color-primary-700: #ffecb3;
    --color-primary-800: #fff8e1;
    --color-primary-900: #ffffff;

    --color-accent-500: #ffe082;
    --color-accent-600: #ffecb3;

    --color-primary-start: #ffca28;
    --color-primary-center: #ffd54f;
    --color-primary-end: #ffe082;

    --gradient-primary: linear-gradient(180deg, #ffca28 0%, #ffd54f 50%, #ffe082 100%);
    --gradient-primary-hover: linear-gradient(180deg, #ffc107 0%, #ffb300 50%, #ffca28 100%);
}

[data-theme="orange-dark"] {
    --app-bg: #1a0e00;
    --app-text: #e0e0e0;
    --app-primary: #ffa726;
    --app-primary-dark: #ff9800;
    --app-primary-light: #ffb74d;
    --app-accent: #ffcc80;

    --color-primary-50: #e65100;
    --color-primary-100: #ef6c00;
    --color-primary-200: #f57c00;
    --color-primary-300: #fb8c00;
    --color-primary-400: #ff9800;
    --color-primary-500: #ffb74d;
    --color-primary-600: #ffcc80;
    --color-primary-700: #ffe0b2;
    --color-primary-800: #fff3e0;
    --color-primary-900: #ffffff;

    --color-accent-500: #ffcc80;
    --color-accent-600: #ffe0b2;

    --color-primary-start: #ffa726;
    --color-primary-center: #ffb74d;
    --color-primary-end: #ffcc80;

    --gradient-primary: linear-gradient(180deg, #ffa726 0%, #ffb74d 50%, #ffcc80 100%);
    --gradient-primary-hover: linear-gradient(180deg, #ff9800 0%, #fb8c00 50%, #ffa726 100%);
}

[data-theme="crimson-dark"] {
    --app-bg: #1a050c;
    --app-text: #e0e0e0;
    --app-primary: #e35d6a;
    --app-primary-dark: #cf3a4e;
    --app-primary-light: #f28a98;
    --app-accent: #f5aab8;

    --color-primary-50: #4a0817;
    --color-primary-100: #6f0f22;
    --color-primary-200: #9b1b30;
    --color-primary-300: #b9253c;
    --color-primary-400: #cf3a4e;
    --color-primary-500: #f28a98;
    --color-primary-600: #fcb2bc;
    --color-primary-700: #ffd9df;
    --color-primary-800: #fff1f3;
    --color-primary-900: #ffffff;

    --color-accent-500: #f5aab8;
    --color-accent-600: #fcb2bc;

    --color-primary-start: #e35d6a;
    --color-primary-center: #f28a98;
    --color-primary-end: #fcb2bc;

    --gradient-primary: linear-gradient(180deg, #e35d6a 0%, #f28a98 50%, #fcb2bc 100%);
    --gradient-primary-hover: linear-gradient(180deg, #cf3a4e 0%, #b9253c 50%, #e35d6a 100%);
}

.bg-gradient-primary {
    background: var(--gradient-primary);
}

.text-primary-start {
    color: var(--color-primary-start);
}

.text-primary-center {
    color: var(--color-primary-center);
}

.text-primary-end {
    color: var(--color-primary-end);
}