808 lines
18 KiB
CSS
808 lines
18 KiB
CSS
/* ============================================ */
|
|
/* LIGHT THEME VARIANTS */
|
|
/* ============================================ */
|
|
|
|
/* Light Theme - Minimal */
|
|
:root {
|
|
--background: #ffffff;
|
|
--card: #fcfcfc;
|
|
--foreground: #000000e6;
|
|
--primary-cta: #1a1a1a;
|
|
--secondary-cta: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #f9f9f9;
|
|
--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: #c7e2fc;
|
|
--background-accent: #9bcfff;
|
|
}
|
|
|
|
/* Light Theme - Dark Blue */
|
|
:root[data-theme="dark-blue"] {
|
|
--background: #f5faff;
|
|
--card: #f1f8ff;
|
|
--foreground: #001122;
|
|
--primary-cta: #15479c;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #a8cce8;
|
|
--background-accent: #7ba3cf;
|
|
}
|
|
|
|
/* Light Theme - Dark Green */
|
|
:root[data-theme="dark-green"] {
|
|
--background: #fafffb;
|
|
--card: #f7fffa;
|
|
--foreground: #001a0a;
|
|
--primary-cta: #0a7039;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #a8d9be;
|
|
--background-accent: #6bbf8e;
|
|
}
|
|
|
|
/* Light Theme - Light Red */
|
|
:root[data-theme="light-red"] {
|
|
--background: #fffafa;
|
|
--card: #fff7f7;
|
|
--foreground: #1a0000;
|
|
--primary-cta: #e63946;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #f5c4c7;
|
|
--background-accent: #f09199;
|
|
}
|
|
|
|
/* Light Theme - Dark Red */
|
|
:root[data-theme="dark-red"] {
|
|
--background: #fffcfc;
|
|
--card: #fffafa;
|
|
--foreground: #220000;
|
|
--primary-cta: #c1121f;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #f0b8bc;
|
|
--background-accent: #e07a82;
|
|
}
|
|
|
|
/* Light Theme - Light Purple */
|
|
:root[data-theme="light-purple"] {
|
|
--background: #fbfaff;
|
|
--card: #f7f5ff;
|
|
--foreground: #0f0022;
|
|
--primary-cta: #8b5cf6;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #d8cef5;
|
|
--background-accent: #c4a8f9;
|
|
}
|
|
|
|
/* Light Theme - Dark Purple */
|
|
:root[data-theme="dark-purple"] {
|
|
--background: #fcfcff;
|
|
--card: #fafaff;
|
|
--foreground: #150022;
|
|
--primary-cta: #7c3aed;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #cfc2f0;
|
|
--background-accent: #ba9bf1;
|
|
}
|
|
|
|
/* Light Theme - Soft Peach */
|
|
:root[data-theme="soft-peach"] {
|
|
--background: #fff8f5;
|
|
--card: #fff0eb;
|
|
--foreground: #3d2c29;
|
|
--primary-cta: #e8a090;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #f5d5cc;
|
|
--background-accent: #f0c4b8;
|
|
}
|
|
|
|
/* Light Theme - Soft Lavender */
|
|
:root[data-theme="soft-lavender"] {
|
|
--background: #f8f5ff;
|
|
--card: #f0ebff;
|
|
--foreground: #2d2940;
|
|
--primary-cta: #a890e8;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #d5ccf5;
|
|
--background-accent: #c4b8f0;
|
|
}
|
|
|
|
/* Light Theme - Soft Blush */
|
|
:root[data-theme="soft-blush"] {
|
|
--background: #fff5f8;
|
|
--card: #ffebf0;
|
|
--foreground: #3d2930;
|
|
--primary-cta: #e890a8;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #f5ccd5;
|
|
--background-accent: #f0b8c4;
|
|
}
|
|
|
|
/* Light Theme - Soft Periwinkle */
|
|
:root[data-theme="soft-periwinkle"] {
|
|
--background: #f5f8ff;
|
|
--card: #ebf0ff;
|
|
--foreground: #292d40;
|
|
--primary-cta: #90a8e8;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #ccd5f5;
|
|
--background-accent: #b8c4f0;
|
|
}
|
|
|
|
|
|
/* ============================================ */
|
|
/* 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 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: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #ff0000;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Brutalist Blue */
|
|
:root[data-theme="dark-brutalist-blue"] {
|
|
--background: #000000;
|
|
--card: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #0066ff;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Brutalist Green */
|
|
:root[data-theme="dark-brutalist-green"] {
|
|
--background: #000000;
|
|
--card: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #00cc00;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Brutalist Purple */
|
|
:root[data-theme="dark-brutalist-purple"] {
|
|
--background: #000000;
|
|
--card: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #9933ff;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Brutalist Orange */
|
|
:root[data-theme="dark-brutalist-orange"] {
|
|
--background: #000000;
|
|
--card: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #ff6600;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Brutalist Yellow */
|
|
:root[data-theme="dark-brutalist-yellow"] {
|
|
--background: #000000;
|
|
--card: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #ffcc00;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Brutalist Pink */
|
|
:root[data-theme="dark-brutalist-pink"] {
|
|
--background: #000000;
|
|
--card: #1b1b1b;
|
|
--foreground: #ffffff;
|
|
--primary-cta: #ff0066;
|
|
--secondary-cta: #151515;
|
|
--accent: #303030;
|
|
--background-accent: #303030;
|
|
}
|
|
|
|
/* Dark Theme - Light Blue */
|
|
:root[data-theme="dark-light-blue"] {
|
|
--background: #010912;
|
|
--card: #152840;
|
|
--foreground: #e6f0ff;
|
|
--primary-cta: #cee7ff;
|
|
--secondary-cta: #0e1a29;
|
|
--accent: #3f5c79;
|
|
--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: #3f5c79;
|
|
--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: #38714a;
|
|
--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: #2e6841;
|
|
--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: #7b4242;
|
|
--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: #7b2d2d;
|
|
--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: #684f7b;
|
|
--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: #59437b;
|
|
--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: #7b5e4a;
|
|
--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: #7b5337;
|
|
--background-accent: #b8400c;
|
|
}
|
|
|
|
/* Dark Theme - Soft Peach */
|
|
:root[data-theme="dark-soft-peach"] {
|
|
--background: #1a1210;
|
|
--card: #2a201d;
|
|
--foreground: #ffe8e0;
|
|
--primary-cta: #e8a090;
|
|
--secondary-cta: #1a1210;
|
|
--accent: #6b4d45;
|
|
--background-accent: #8b5d50;
|
|
}
|
|
|
|
/* Dark Theme - Soft Lavender */
|
|
:root[data-theme="dark-soft-lavender"] {
|
|
--background: #121018;
|
|
--card: #1d1a28;
|
|
--foreground: #e8e0ff;
|
|
--primary-cta: #a890e8;
|
|
--secondary-cta: #121018;
|
|
--accent: #4d456b;
|
|
--background-accent: #5d508b;
|
|
}
|
|
|
|
/* Dark Theme - Soft Blush */
|
|
:root[data-theme="dark-soft-blush"] {
|
|
--background: #1a1014;
|
|
--card: #2a1d22;
|
|
--foreground: #ffe0e8;
|
|
--primary-cta: #e890a8;
|
|
--secondary-cta: #1a1014;
|
|
--accent: #6b4555;
|
|
--background-accent: #8b5068;
|
|
}
|
|
|
|
|
|
/* ============================================ */
|
|
/* 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: #d5c6ff;
|
|
--background-accent: #b394fa;
|
|
}
|
|
|
|
/* Light - Blue Orange */
|
|
:root[data-theme="blue-orange"] {
|
|
--background: #f7fafd;
|
|
--card: #eff6fc;
|
|
--foreground: #1a2433;
|
|
--primary-cta: #2563eb;
|
|
--secondary-cta: #ffffff;
|
|
--accent: #f8c093;
|
|
--background-accent: #f5b78b;
|
|
}
|
|
|
|
/* 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 - 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;
|
|
}
|
|
|