Files
4dbc7d3d-08de-4ebc-94bd-192…/colorThemes.css
vitalijmulika ecb043f83b Initial commit
2025-12-15 11:53:22 +02:00

1436 lines
32 KiB
CSS

/* ============================================ */
/* LIGHT THEME VARIANTS */
/* ============================================ */
/* Light Theme - Minimal */
:root {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #000000e6;
--primary-cta: #1a1a1a;
--secondary-cta: #ffffff;
--accent: #bebebe;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Blue */
:root[data-theme="minimal-light-blue"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #000a18e6;
--primary-cta: #409fff;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Blue */
:root[data-theme="minimal-dark-blue"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #000612e6;
--primary-cta: #15479c;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Green */
:root[data-theme="minimal-light-green"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #00120ae6;
--primary-cta: #15ad59;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Green */
:root[data-theme="minimal-dark-green"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #000f06e6;
--primary-cta: #0a7039;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Red */
:root[data-theme="minimal-light-red"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #120006e6;
--primary-cta: #e63946;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Red */
:root[data-theme="minimal-dark-red"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #0f0003e6;
--primary-cta: #c1121f;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Purple */
:root[data-theme="minimal-light-purple"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #0a0018e6;
--primary-cta: #8b5cf6;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Purple */
:root[data-theme="minimal-dark-purple"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #080015e6;
--primary-cta: #7c3aed;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Orange */
:root[data-theme="minimal-light-orange"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #120a00e6;
--primary-cta: #ff8c42;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Orange */
:root[data-theme="minimal-dark-orange"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #0f0600e6;
--primary-cta: #e8590c;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Cyan */
:root[data-theme="minimal-light-cyan"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #001212e6;
--primary-cta: #16d4f6;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Cyan */
:root[data-theme="minimal-dark-cyan"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #000f0fe6;
--primary-cta: #00c9e8;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Light Yellow */
:root[data-theme="minimal-light-yellow"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #121200e6;
--primary-cta: #ffcf40;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Minimal Dark Yellow */
:root[data-theme="minimal-dark-yellow"] {
--background: #ffffff;
--card: #fcfcfc;
--foreground: #0f0f00e6;
--primary-cta: #ffae00;
--secondary-cta: #ffffff;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
}
/* Light Theme - Brutalist Red */
:root[data-theme="brutalist-red"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #ff0000;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Blue */
:root[data-theme="brutalist-blue"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #0066ff;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Green */
:root[data-theme="brutalist-green"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #00cc00;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Purple */
:root[data-theme="brutalist-purple"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #9933ff;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Orange */
:root[data-theme="brutalist-orange"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #ff6600;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Cyan */
:root[data-theme="brutalist-cyan"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #00ccff;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Yellow */
:root[data-theme="brutalist-yellow"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #ffcc00;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Brutalist Pink */
:root[data-theme="brutalist-pink"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #ff0066;
--secondary-cta: #ffffff;
--accent: #e5e5e5;
--background-accent: #f5f5f5;
}
/* Light Theme - Light Blue */
:root[data-theme="light-blue"] {
--background: #f8fcff;
--card: #ffffff;
--foreground: #00101f;
--primary-cta: #409fff;
--secondary-cta: #ffffff;
--accent: #7cbdff;
--background-accent: #409fff;
}
/* Light Theme - Dark Blue */
:root[data-theme="dark-blue"] {
--background: #f5faff;
--card: #f1f8ff;
--foreground: #001122;
--primary-cta: #15479c;
--secondary-cta: #ffffff;
--accent: #0059b3;
--background-accent: #15479c;
}
/* Light Theme - Light Green */
:root[data-theme="light-green"] {
--background: #f9fefb;
--card: #f7fef8;
--foreground: #001a00;
--primary-cta: #15ad59;
--secondary-cta: #ffffff;
--accent: #10c25d;
--background-accent: #15ad59;
}
/* Light Theme - Dark Green */
:root[data-theme="dark-green"] {
--background: #fafffb;
--card: #f7fffa;
--foreground: #001a0a;
--primary-cta: #0a7039;
--secondary-cta: #ffffff;
--accent: #0d8f47;
--background-accent: #0a7039;
}
/* Light Theme - Light Red */
:root[data-theme="light-red"] {
--background: #fffafa;
--card: #fff7f7;
--foreground: #1a0000;
--primary-cta: #e63946;
--secondary-cta: #ffffff;
--accent: #ff4d5a;
--background-accent: #e63946;
}
/* Light Theme - Dark Red */
:root[data-theme="dark-red"] {
--background: #fffcfc;
--card: #fffafa;
--foreground: #220000;
--primary-cta: #c1121f;
--secondary-cta: #ffffff;
--accent: #e63946;
--background-accent: #c1121f;
}
/* Light Theme - Light Purple */
:root[data-theme="light-purple"] {
--background: #fbfaff;
--card: #f7f5ff;
--foreground: #0f0022;
--primary-cta: #8b5cf6;
--secondary-cta: #ffffff;
--accent: #a78bfa;
--background-accent: #8b5cf6;
}
/* Light Theme - Dark Purple */
:root[data-theme="dark-purple"] {
--background: #fcfcff;
--card: #fafaff;
--foreground: #150022;
--primary-cta: #7c3aed;
--secondary-cta: #ffffff;
--accent: #8b5cf6;
--background-accent: #7c3aed;
}
/* Light Theme - Light Orange */
:root[data-theme="light-orange"] {
--background: #fffaf5;
--card: #fff7f0;
--foreground: #1a0800;
--primary-cta: #ff8c42;
--secondary-cta: #ffffff;
--accent: #ffaa70;
--background-accent: #ff8c42;
}
/* Light Theme - Dark Orange */
:root[data-theme="dark-orange"] {
--background: #fffcfa;
--card: #fffaf7;
--foreground: #220a00;
--primary-cta: #e8590c;
--secondary-cta: #ffffff;
--accent: #ff8c42;
--background-accent: #e8590c;
}
/* Light Theme - Light Cyan */
:root[data-theme="light-cyan"] {
--background: #fafefe;
--card: #f0feff;
--foreground: #001a1a;
--primary-cta: #16d4f6;
--secondary-cta: #ffffff;
--accent: #22d3ee;
--background-accent: #06b6d4;
}
/* Light Theme - Dark Cyan */
:root[data-theme="dark-cyan"] {
--background: #faffff;
--card: #f7feff;
--foreground: #00171a;
--primary-cta: #00c9e8;
--secondary-cta: #ffffff;
--accent: #06b6d4;
--background-accent: #0891b2;
}
/* Light Theme - Light Yellow */
:root[data-theme="light-yellow"] {
--background: #fefef5;
--card: #fdfdf0;
--foreground: #1a1a00;
--primary-cta: #ffcf40;
--secondary-cta: #ffffff;
--accent: #facc15;
--background-accent: #ffbf00;
}
/* Light Theme - Dark Yellow */
:root[data-theme="dark-yellow"] {
--background: #fffef7;
--card: #fffdf0;
--foreground: #221a00;
--primary-cta: #ffae00;
--secondary-cta: #ffffff;
--accent: #eab308;
--background-accent: #ca8a04;
}
/* ============================================ */
/* DARK THEME VARIANTS */
/* ============================================ */
/* Dark Theme - Minimal */
:root[data-theme="dark"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffffe6;
--primary-cta: #e6e6e6;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Blue */
:root[data-theme="dark-minimal-light-blue"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f0f8ffe6;
--primary-cta: #cee7ff;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Blue */
:root[data-theme="dark-minimal-dark-blue"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f0f5fce6;
--primary-cta: #3891f6;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Green */
:root[data-theme="dark-minimal-light-green"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5fffae6;
--primary-cta: #80da9b;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Green */
:root[data-theme="dark-minimal-dark-green"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f0fff8e6;
--primary-cta: #1cde5d;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Red */
:root[data-theme="dark-minimal-light-red"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fff5f5e6;
--primary-cta: #ff7a7a;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Red */
:root[data-theme="dark-minimal-dark-red"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fff0f0e6;
--primary-cta: #ff3d4a;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Purple */
:root[data-theme="dark-minimal-light-purple"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f8f5ffe6;
--primary-cta: #c89bff;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Purple */
:root[data-theme="dark-minimal-dark-purple"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5f0fce6;
--primary-cta: #b366ff;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Orange */
:root[data-theme="dark-minimal-light-orange"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fffaf5e6;
--primary-cta: #ffaa70;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Orange */
:root[data-theme="dark-minimal-dark-orange"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fff8f0e6;
--primary-cta: #ff8c42;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Cyan */
:root[data-theme="dark-minimal-light-cyan"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5fafae6;
--primary-cta: #67e8f9;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Cyan */
:root[data-theme="dark-minimal-dark-cyan"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f0f8f8e6;
--primary-cta: #22d3ee;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Light Yellow */
:root[data-theme="dark-minimal-light-yellow"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fffffae6;
--primary-cta: #fde047;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Minimal Dark Yellow */
:root[data-theme="dark-minimal-dark-yellow"] {
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fffef5e6;
--primary-cta: #facc15;
--secondary-cta: #1a1a1a;
--accent: #737373;
--background-accent: #737373;
}
/* Dark Theme - Brutalist Red */
:root[data-theme="dark-brutalist-red"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #ff0000;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Blue */
:root[data-theme="dark-brutalist-blue"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #0066ff;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Green */
:root[data-theme="dark-brutalist-green"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #00cc00;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Purple */
:root[data-theme="dark-brutalist-purple"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #9933ff;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Orange */
:root[data-theme="dark-brutalist-orange"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #ff6600;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Cyan */
:root[data-theme="dark-brutalist-cyan"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #00ccff;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Yellow */
:root[data-theme="dark-brutalist-yellow"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #ffcc00;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Brutalist Pink */
:root[data-theme="dark-brutalist-pink"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #ff0066;
--secondary-cta: #000000;
--accent: #1a1a1a;
--background-accent: #0f0f0f;
}
/* Dark Theme - Light Blue */
:root[data-theme="dark-light-blue"] {
--background: #010912;
--card: #152840;
--foreground: #e6f0ff;
--primary-cta: #cee7ff;
--secondary-cta: #0e1a29;
--accent: #80bfff;
--background-accent: #004a93;
}
/* Dark Theme - Dark Blue */
:root[data-theme="dark-dark-blue"] {
--background: #00070e;
--card: #152840;
--foreground: #e6f0ff;
--primary-cta: #3891f6;
--secondary-cta: #0e1a29;
--accent: #80bfff;
--background-accent: #016ad3;
}
/* Dark Theme - Light Green */
:root[data-theme="dark-light-green"] {
--background: #000802;
--card: #0b1a0b;
--foreground: #e6ffe6;
--primary-cta: #80da9b;
--secondary-cta: #07170b;
--accent: #7ff09d;
--background-accent: #2c6541;
}
/* Dark Theme - Dark Green */
:root[data-theme="dark-dark-green"] {
--background: #000602;
--card: #0d1d0d;
--foreground: #e6ffe6;
--primary-cta: #1cde5d;
--secondary-cta: #0a1f0f;
--accent: #5dd882;
--background-accent: #0d6b32;
}
/* Dark Theme - Light Red */
:root[data-theme="dark-light-red"] {
--background: #080000;
--card: #1e0d0d;
--foreground: #ffe6e6;
--primary-cta: #ff7a7a;
--secondary-cta: #1e0909;
--accent: #ff8a8a;
--background-accent: #65292c;
}
/* Dark Theme - Dark Red */
:root[data-theme="dark-dark-red"] {
--background: #060000;
--card: #1d0d0d;
--foreground: #ffe6e6;
--primary-cta: #ff3d4a;
--secondary-cta: #1f0a0a;
--accent: #ff5c5c;
--background-accent: #b8111f;
}
/* Dark Theme - Light Purple */
:root[data-theme="dark-light-purple"] {
--background: #020008;
--card: #0b1a1d;
--foreground: #f0e6ff;
--primary-cta: #c89bff;
--secondary-cta: #0b0717;
--accent: #d4a3ff;
--background-accent: #65417c;
}
/* Dark Theme - Dark Purple */
:root[data-theme="dark-dark-purple"] {
--background: #020006;
--card: #1d0d1d;
--foreground: #f0e6ff;
--primary-cta: #b366ff;
--secondary-cta: #1a0a29;
--accent: #b58cff;
--background-accent: #6b28d9;
}
/* Dark Theme - Light Orange */
:root[data-theme="dark-light-orange"] {
--background: #080200;
--card: #1a0d0b;
--foreground: #ffe6d5;
--primary-cta: #ffaa70;
--secondary-cta: #170b07;
--accent: #ffc299;
--background-accent: #b8541e;
}
/* Dark Theme - Dark Orange */
:root[data-theme="dark-dark-orange"] {
--background: #060200;
--card: #1d0d0b;
--foreground: #ffe6d5;
--primary-cta: #ff8c42;
--secondary-cta: #1f0a00;
--accent: #ffaa70;
--background-accent: #b8400c;
}
/* Dark Theme - Light Cyan */
:root[data-theme="dark-light-cyan"] {
--background: #000808;
--card: #0b1a1d;
--foreground: #d5f5ff;
--primary-cta: #67e8f9;
--secondary-cta: #071719;
--accent: #a5f3fc;
--background-accent: #0e7490;
}
/* Dark Theme - Dark Cyan */
:root[data-theme="dark-dark-cyan"] {
--background: #000606;
--card: #0d1d1d;
--foreground: #d5f5ff;
--primary-cta: #22d3ee;
--secondary-cta: #0a1f1f;
--accent: #67e8f9;
--background-accent: #0891b2;
}
/* Dark Theme - Light Yellow */
:root[data-theme="dark-light-yellow"] {
--background: #080800;
--card: #1a1d0b;
--foreground: #fffde6;
--primary-cta: #fde047;
--secondary-cta: #17190b;
--accent: #fef08a;
--background-accent: #a16207;
}
/* Dark Theme - Dark Yellow */
:root[data-theme="dark-dark-yellow"] {
--background: #060600;
--card: #1d1d0b;
--foreground: #fffde6;
--primary-cta: #facc15;
--secondary-cta: #1f1f0a;
--accent: #fde047;
--background-accent: #854d0e;
}
/* ============================================ */
/* SOFT/PASTEL THEME VARIANTS */
/* ============================================ */
/* Light Theme - Soft Peach */
:root[data-theme="soft-peach"] {
--background: #fef5f1;
--card: #fdf0eb;
--foreground: #4a4540;
--primary-cta: #e8b4a0;
--secondary-cta: #ffffff;
--accent: #f5d4c8;
--background-accent: #d9a18f;
}
/* Light Theme - Soft Lavender */
:root[data-theme="soft-lavender"] {
--background: #f5f3f9;
--card: #eeebf5;
--foreground: #44404a;
--primary-cta: #b8a8d4;
--secondary-cta: #ffffff;
--accent: #d4c8e8;
--background-accent: #a593c4;
}
/* Light Theme - Soft Mint */
:root[data-theme="soft-mint"] {
--background: #f1f9f5;
--card: #ebf5ef;
--foreground: #3f4a44;
--primary-cta: #9ed4b8;
--secondary-cta: #ffffff;
--accent: #c8e8d4;
--background-accent: #8bc4a5;
}
/* Light Theme - Soft Blush */
:root[data-theme="soft-blush"] {
--background: #f9f3f5;
--card: #f5ebee;
--foreground: #4a4044;
--primary-cta: #d4a8b8;
--secondary-cta: #ffffff;
--accent: #e8c8d4;
--background-accent: #c493a5;
}
/* Light Theme - Soft Sky */
:root[data-theme="soft-sky"] {
--background: #f1f7f9;
--card: #ebf2f5;
--foreground: #404548;
--primary-cta: #a0c4d4;
--secondary-cta: #ffffff;
--accent: #c8dce8;
--background-accent: #8fb0c4;
}
/* Light Theme - Soft Sage */
:root[data-theme="soft-sage"] {
--background: #f3f7f1;
--card: #edf2eb;
--foreground: #43483f;
--primary-cta: #a8c4a0;
--secondary-cta: #ffffff;
--accent: #cbd8c8;
--background-accent: #93b08b;
}
/* Light Theme - Soft Coral */
:root[data-theme="soft-coral"] {
--background: #f9f3f1;
--card: #f5eeeb;
--foreground: #4a4440;
--primary-cta: #d4b0a0;
--secondary-cta: #ffffff;
--accent: #e8d4c8;
--background-accent: #c49d8f;
}
/* Light Theme - Soft Periwinkle */
:root[data-theme="soft-periwinkle"] {
--background: #f3f5f9;
--card: #ebeef5;
--foreground: #404348;
--primary-cta: #a8b4d4;
--secondary-cta: #ffffff;
--accent: #c8d1e8;
--background-accent: #93a1c4;
}
/* Dark Theme - Soft Peach */
:root[data-theme="dark-soft-peach"] {
--background: #1a1614;
--card: #241f1c;
--foreground: #f5e8e0;
--primary-cta: #e8b4a0;
--secondary-cta: #1a1614;
--accent: #b88a78;
--background-accent: #8f6d5f;
}
/* Dark Theme - Soft Lavender */
:root[data-theme="dark-soft-lavender"] {
--background: #18161a;
--card: #221e26;
--foreground: #ede5f5;
--primary-cta: #b8a8d4;
--secondary-cta: #18161a;
--accent: #8a7aa0;
--background-accent: #6e608a;
}
/* Dark Theme - Soft Mint */
:root[data-theme="dark-soft-mint"] {
--background: #141a17;
--card: #1c241f;
--foreground: #e5f0ea;
--primary-cta: #9ed4b8;
--secondary-cta: #141a17;
--accent: #78a88c;
--background-accent: #5f8a72;
}
/* Dark Theme - Soft Blush */
:root[data-theme="dark-soft-blush"] {
--background: #1a1618;
--card: #261e22;
--foreground: #f0e5ea;
--primary-cta: #d4a8b8;
--secondary-cta: #1a1618;
--accent: #a07a8a;
--background-accent: #8a606e;
}
/* Dark Theme - Soft Sky */
:root[data-theme="dark-soft-sky"] {
--background: #141719;
--card: #1c2124;
--foreground: #e5ecf0;
--primary-cta: #a0c4d4;
--secondary-cta: #141719;
--accent: #7896a4;
--background-accent: #607a8a;
}
/* Dark Theme - Soft Sage */
:root[data-theme="dark-soft-sage"] {
--background: #161a14;
--card: #1e241c;
--foreground: #e8ede5;
--primary-cta: #a8c4a0;
--secondary-cta: #161a14;
--accent: #7a9478;
--background-accent: #647a5f;
}
/* Dark Theme - Soft Coral */
:root[data-theme="dark-soft-coral"] {
--background: #1a1714;
--card: #24211c;
--foreground: #f0e8e5;
--primary-cta: #d4b0a0;
--secondary-cta: #1a1714;
--accent: #a4887a;
--background-accent: #8a7264;
}
/* Dark Theme - Soft Periwinkle */
:root[data-theme="dark-soft-periwinkle"] {
--background: #161719;
--card: #1e2024;
--foreground: #e8eaf0;
--primary-cta: #a8b4d4;
--secondary-cta: #161719;
--accent: #7e88a0;
--background-accent: #686e8a;
}
/* ============================================ */
/* NEON THEME VARIANTS */
/* ============================================ */
/* Light Neon - Green */
:root[data-theme="neon-green"] {
--background: #f5fff5;
--card: #ebffeb;
--foreground: #003300;
--primary-cta: #00ff00;
--secondary-cta: #ffffff;
--accent: #66ff66;
--background-accent: #00cc00;
}
/* Light Neon - Pink */
:root[data-theme="neon-pink"] {
--background: #fff5ff;
--card: #ffebff;
--foreground: #330033;
--primary-cta: #ff00ff;
--secondary-cta: #ffffff;
--accent: #ff66ff;
--background-accent: #cc00cc;
}
/* Light Neon - Purple */
:root[data-theme="neon-purple"] {
--background: #f7f0ff;
--card: #ede0ff;
--foreground: #2a0033;
--primary-cta: #cc00ff;
--secondary-cta: #ffffff;
--accent: #dd66ff;
--background-accent: #aa00cc;
}
/* Light Neon - Red */
:root[data-theme="neon-red"] {
--background: #fff0f5;
--card: #ffe0eb;
--foreground: #330011;
--primary-cta: #ff0044;
--secondary-cta: #ffffff;
--accent: #ff3366;
--background-accent: #cc0033;
}
/* Dark Neon - Green */
:root[data-theme="dark-neon-green"] {
--background: #050a05;
--card: #0a120a;
--foreground: #e0ffe0;
--primary-cta: #00ff00;
--secondary-cta: #050a05;
--accent: #00cc00;
--background-accent: #003300;
}
/* Dark Neon - Pink */
:root[data-theme="dark-neon-pink"] {
--background: #0a050a;
--card: #120a12;
--foreground: #ffe0ff;
--primary-cta: #ff00ff;
--secondary-cta: #0a050a;
--accent: #cc00cc;
--background-accent: #330033;
}
/* Dark Neon - Purple */
:root[data-theme="dark-neon-purple"] {
--background: #08050a;
--card: #100a12;
--foreground: #f0e0ff;
--primary-cta: #cc00ff;
--secondary-cta: #08050a;
--accent: #aa00cc;
--background-accent: #2a0033;
}
/* Dark Neon - Red */
:root[data-theme="dark-neon-red"] {
--background: #0a0505;
--card: #120a0a;
--foreground: #ffe0e0;
--primary-cta: #ff0044;
--secondary-cta: #0a0505;
--accent: #ff0066;
--background-accent: #330011;
}
/* ============================================ */
/* MONOCHROME/GRAYSCALE THEME VARIANTS */
/* ============================================ */
/* Light Monochrome - White */
:root[data-theme="monochrome-white"] {
--background: #ffffff;
--card: #fafafa;
--foreground: #000000;
--primary-cta: #000000;
--secondary-cta: #ffffff;
--accent: #cccccc;
--background-accent: #999999;
}
/* Light Monochrome - Light Gray */
:root[data-theme="monochrome-light-gray"] {
--background: #f5f5f5;
--card: #eeeeee;
--foreground: #1a1a1a;
--primary-cta: #333333;
--secondary-cta: #ffffff;
--accent: #cccccc;
--background-accent: #888888;
}
/* Light Monochrome - Medium Gray */
:root[data-theme="monochrome-medium-gray"] {
--background: #e0e0e0;
--card: #d4d4d4;
--foreground: #1a1a1a;
--primary-cta: #000000;
--secondary-cta: #ffffff;
--accent: #999999;
--background-accent: #666666;
}
/* Light Monochrome - Dark Gray */
:root[data-theme="monochrome-dark-gray"] {
--background: #cccccc;
--card: #bbbbbb;
--foreground: #000000;
--primary-cta: #1a1a1a;
--secondary-cta: #ffffff;
--accent: #888888;
--background-accent: #555555;
}
/* Dark Monochrome - Black */
:root[data-theme="dark-monochrome-black"] {
--background: #000000;
--card: #0a0a0a;
--foreground: #ffffff;
--primary-cta: #ffffff;
--secondary-cta: #000000;
--accent: #666666;
--background-accent: #999999;
}
/* Dark Monochrome - Charcoal */
:root[data-theme="dark-monochrome-charcoal"] {
--background: #1a1a1a;
--card: #242424;
--foreground: #ffffff;
--primary-cta: #eeeeee;
--secondary-cta: #1a1a1a;
--accent: #888888;
--background-accent: #aaaaaa;
}
/* Dark Monochrome - Dark Gray */
:root[data-theme="dark-monochrome-dark-gray"] {
--background: #333333;
--card: #404040;
--foreground: #ffffff;
--primary-cta: #ffffff;
--secondary-cta: #1a1a1a;
--accent: #999999;
--background-accent: #bbbbbb;
}
/* Dark Monochrome - Medium Gray */
:root[data-theme="dark-monochrome-medium-gray"] {
--background: #555555;
--card: #666666;
--foreground: #ffffff;
--primary-cta: #f5f5f5;
--secondary-cta: #333333;
--accent: #aaaaaa;
--background-accent: #cccccc;
}
/* ============================================ */
/* EARTH TONES/ORGANIC THEME VARIANTS */
/* ============================================ */
/* Light Earth - Terracotta */
:root[data-theme="earth-terracotta"] {
--background: #faf5f2;
--card: #f5ede8;
--foreground: #3d2417;
--primary-cta: #d4704c;
--secondary-cta: #ffffff;
--accent: #e8a88f;
--background-accent: #b85a3a;
}
/* Light Earth - Olive */
:root[data-theme="earth-olive"] {
--background: #f5f5f0;
--card: #efeee8;
--foreground: #2a2d1f;
--primary-cta: #7a7a52;
--secondary-cta: #ffffff;
--accent: #a0a085;
--background-accent: #5f5f3f;
}
/* Light Earth - Moss */
:root[data-theme="earth-moss"] {
--background: #f3f5f0;
--card: #ebede8;
--foreground: #22331e;
--primary-cta: #6b7c5a;
--secondary-cta: #ffffff;
--accent: #93a887;
--background-accent: #556b47;
}
/* Light Earth - Burnt Orange */
:root[data-theme="earth-burnt-orange"] {
--background: #faf5f0;
--card: #f5ede5;
--foreground: #3d2610;
--primary-cta: #cc6633;
--secondary-cta: #ffffff;
--accent: #e69966;
--background-accent: #a85028;
}
/* Dark Earth - Terracotta */
:root[data-theme="dark-earth-terracotta"] {
--background: #1a0f0a;
--card: #261712;
--foreground: #f5e8e0;
--primary-cta: #d4704c;
--secondary-cta: #1a0f0a;
--accent: #a85a3a;
--background-accent: #8a4830;
}
/* Dark Earth - Olive */
:root[data-theme="dark-earth-olive"] {
--background: #14160f;
--card: #1f2117;
--foreground: #eeeed8;
--primary-cta: #7a7a52;
--secondary-cta: #14160f;
--accent: #5f5f3f;
--background-accent: #4a4a30;
}
/* Dark Earth - Moss */
:root[data-theme="dark-earth-moss"] {
--background: #0f140d;
--card: #1a2116;
--foreground: #e8f0e0;
--primary-cta: #6b7c5a;
--secondary-cta: #0f140d;
--accent: #556b47;
--background-accent: #445538;
}
/* Dark Earth - Burnt Orange */
:root[data-theme="dark-earth-burnt-orange"] {
--background: #1a0f08;
--card: #261812;
--foreground: #f5e8d8;
--primary-cta: #cc6633;
--secondary-cta: #1a0f08;
--accent: #a85028;
--background-accent: #8a4020;
}
/* ============================================ */
/* MULTI-COLOR COMBO THEME VARIANTS */
/* ============================================ */
/* Light - Blue Purple */
:root[data-theme="blue-purple"] {
--background: #f8faff;
--card: #f0f4ff;
--foreground: #1a1a2e;
--primary-cta: #3b82f6;
--secondary-cta: #ffffff;
--accent: #a78bfa;
--background-accent: #8b5cf6;
}
/* Light - Blue Orange */
:root[data-theme="blue-orange"] {
--background: #f7fafd;
--card: #eff6fc;
--foreground: #1a2433;
--primary-cta: #2563eb;
--secondary-cta: #ffffff;
--accent: #fb923c;
--background-accent: #f97316;
}
/* Light - Coral Teal */
:root[data-theme="coral-teal"] {
--background: #fff9f5;
--card: #fff3eb;
--foreground: #2e2a1a;
--primary-cta: #ff7f5c;
--secondary-cta: #ffffff;
--accent: #5eead4;
--background-accent: #14b8a6;
}
/* Light - Navy Gold */
:root[data-theme="navy-gold"] {
--background: #f7f9fc;
--card: #eff3f8;
--foreground: #1a2433;
--primary-cta: #1e3a8a;
--secondary-cta: #ffffff;
--accent: #fbbf24;
--background-accent: #d97706;
}
/* Light - Sage Terracotta */
:root[data-theme="sage-terracotta"] {
--background: #f7f9f5;
--card: #eff3eb;
--foreground: #2a331a;
--primary-cta: #6b7c5a;
--secondary-cta: #ffffff;
--accent: #e8a88f;
--background-accent: #b85a3a;
}
/* Light - Crimson Sky */
:root[data-theme="crimson-sky"] {
--background: #fef7f9;
--card: #fceef3;
--foreground: #3a1a24;
--primary-cta: #dc2626;
--secondary-cta: #ffffff;
--accent: #7dd3fc;
--background-accent: #0ea5e9;
}
/* Light - Charcoal Yellow */
:root[data-theme="charcoal-yellow"] {
--background: #fafafa;
--card: #f0f0f0;
--foreground: #1a1a1a;
--primary-cta: #262626;
--secondary-cta: #ffffff;
--accent: #fbbf24;
--background-accent: #f59e0b;
}
/* Dark - Blue Purple */
:root[data-theme="dark-blue-purple"] {
--background: #0a0e1a;
--card: #121626;
--foreground: #e0e8ff;
--primary-cta: #3b82f6;
--secondary-cta: #0a0e1a;
--accent: #a78bfa;
--background-accent: #8b5cf6;
}
/* Dark - Blue Orange */
:root[data-theme="dark-blue-orange"] {
--background: #0a1219;
--card: #121a26;
--foreground: #e0ecf8;
--primary-cta: #2563eb;
--secondary-cta: #0a1219;
--accent: #fb923c;
--background-accent: #f97316;
}
/* Dark - Coral Teal */
:root[data-theme="dark-coral-teal"] {
--background: #1a0f0a;
--card: #261812;
--foreground: #ffe8e0;
--primary-cta: #ff7f5c;
--secondary-cta: #1a0f0a;
--accent: #5eead4;
--background-accent: #14b8a6;
}
/* Dark - Navy Gold */
:root[data-theme="dark-navy-gold"] {
--background: #0a0f19;
--card: #121826;
--foreground: #e0e8f8;
--primary-cta: #1e3a8a;
--secondary-cta: #0a0f19;
--accent: #fbbf24;
--background-accent: #d97706;
}
/* Dark - Sage Terracotta */
:root[data-theme="dark-sage-terracotta"] {
--background: #0f140d;
--card: #1a2116;
--foreground: #e8f0e0;
--primary-cta: #6b7c5a;
--secondary-cta: #0f140d;
--accent: #e8a88f;
--background-accent: #b85a3a;
}
/* Dark - Crimson Sky */
:root[data-theme="dark-crimson-sky"] {
--background: #190a0f;
--card: #261218;
--foreground: #ffe0e8;
--primary-cta: #dc2626;
--secondary-cta: #190a0f;
--accent: #7dd3fc;
--background-accent: #0ea5e9;
}
/* Dark - Charcoal Yellow */
:root[data-theme="dark-charcoal-yellow"] {
--background: #0a0a0a;
--card: #141414;
--foreground: #f0f0f0;
--primary-cta: #262626;
--secondary-cta: #0a0a0a;
--accent: #fbbf24;
--background-accent: #f59e0b;
}