/* ========================================================= ZACKY OS — Color Palette Catalog Every palette we've explored, saved as selectable schemes. USAGE: Default (Ink Indigo) — just include this file, no attribute needed Alternate — add data-palette="..." to or SCHEMES: ink → C2 · Ink Indigo (DEFAULT — Zacky OS canonical) magnetic → A · Magnetic Blue atmospheric→ B · Atmospheric electric → C1 · Pure Electric (deep royal secondary) indigo → C3 · Clear Indigo (Linear-style) violet → C4 · Full Violet (bold two-hue commit) velvet → D · Velvet Sapphire (monochrome blue scale) ember → E · Ember (warm coral wildcard) jade → F · Jade (emerald wildcard) ========================================================= */ /* ═════════════ DEFAULT (Ink Indigo — C2) ═════════════ */ :root, :root[data-palette="ink"] { /* Primary accent */ --a: #2563EB; --a-2: #3B82F6; --a-3: #6693F7; --a-soft: rgba(37, 99, 235, 0.09); --a-soft-2: rgba(37, 99, 235, 0.16); --a-soft-3: rgba(37, 99, 235, 0.26); --a-shadow: rgba(37, 99, 235, 0.32); /* Sector family */ --cpe: #2563EB; /* electric blue */ --ld: #3730A3; /* ink indigo — slight purple push */ --rm: #8B9BB5; /* lifted blue-slate (quieter) */ --cpe-soft: rgba(37, 99, 235, 0.10); --ld-soft: rgba(55, 48, 163, 0.10); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"], [data-theme="dark"][data-palette="ink"] { --a: #4D7BFF; --a-2: #6B92FF; --a-3: #89A8FF; --a-soft: rgba(77, 123, 255, 0.14); --a-soft-2: rgba(77, 123, 255, 0.24); --a-soft-3: rgba(77, 123, 255, 0.34); --a-shadow: rgba(77, 123, 255, 0.40); --cpe: #4D7BFF; --ld: #818CF8; /* lifted indigo */ --rm: #A5B3CC; --cpe-soft: rgba(77, 123, 255, 0.14); --ld-soft: rgba(129, 140, 248, 0.16); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ A · MAGNETIC BLUE ═════════════ */ :root[data-palette="magnetic"] { --a: #0066FF; --a-2: #2E7EFF; --a-3: #5C98FF; --a-soft: rgba(0, 102, 255, 0.09); --a-soft-2: rgba(0, 102, 255, 0.16); --a-soft-3: rgba(0, 102, 255, 0.26); --a-shadow: rgba(0, 102, 255, 0.32); --cpe: #0066FF; --ld: #0052CC; --rm: #8B9BB5; --cpe-soft: rgba(0, 102, 255, 0.10); --ld-soft: rgba(0, 82, 204, 0.10); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"][data-palette="magnetic"] { --a: #5E9BFF; --a-2: #7FB2FF; --a-3: #A1C8FF; --a-soft: rgba(94, 155, 255, 0.14); --a-soft-2: rgba(94, 155, 255, 0.22); --a-soft-3: rgba(94, 155, 255, 0.32); --a-shadow: rgba(94, 155, 255, 0.40); --cpe: #5E9BFF; --ld: #93B3FF; --rm: #A5B3CC; --cpe-soft: rgba(94, 155, 255, 0.14); --ld-soft: rgba(147, 179, 255, 0.14); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ B · ATMOSPHERIC ═════════════ */ :root[data-palette="atmospheric"] { --a: #0099FF; --a-2: #33ADFF; --a-3: #66C2FF; --a-soft: rgba(0, 153, 255, 0.09); --a-soft-2: rgba(0, 153, 255, 0.16); --a-soft-3: rgba(0, 153, 255, 0.26); --a-shadow: rgba(0, 153, 255, 0.32); --cpe: #0099FF; --ld: #1E5FD4; --rm: #8B9BB5; --cpe-soft: rgba(0, 153, 255, 0.10); --ld-soft: rgba(30, 95, 212, 0.10); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"][data-palette="atmospheric"] { --a: #40C4FF; --a-2: #66D0FF; --a-3: #8CDCFF; --a-soft: rgba(64, 196, 255, 0.14); --a-soft-2: rgba(64, 196, 255, 0.24); --a-soft-3: rgba(64, 196, 255, 0.34); --a-shadow: rgba(64, 196, 255, 0.40); --cpe: #40C4FF; --ld: #60A5FA; --rm: #A5B3CC; --cpe-soft: rgba(64, 196, 255, 0.14); --ld-soft: rgba(96, 165, 250, 0.14); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ C1 · PURE ELECTRIC (deep royal secondary) ═════════════ */ :root[data-palette="electric"] { --a: #2563EB; --a-2: #3B82F6; --a-3: #6693F7; --a-soft: rgba(37, 99, 235, 0.09); --a-soft-2: rgba(37, 99, 235, 0.16); --a-soft-3: rgba(37, 99, 235, 0.26); --a-shadow: rgba(37, 99, 235, 0.32); --cpe: #2563EB; --ld: #1E40AF; --rm: #8B9BB5; --cpe-soft: rgba(37, 99, 235, 0.10); --ld-soft: rgba(30, 64, 175, 0.10); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"][data-palette="electric"] { --a: #4D7BFF; --a-2: #6B92FF; --a-3: #89A8FF; --a-soft: rgba(77, 123, 255, 0.14); --a-soft-2: rgba(77, 123, 255, 0.24); --a-soft-3: rgba(77, 123, 255, 0.34); --a-shadow: rgba(77, 123, 255, 0.40); --cpe: #4D7BFF; --ld: #89A8FF; --rm: #A5B3CC; --cpe-soft: rgba(77, 123, 255, 0.14); --ld-soft: rgba(137, 168, 255, 0.14); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ C3 · CLEAR INDIGO (Linear-style) ═════════════ */ :root[data-palette="indigo"] { --a: #2563EB; --a-2: #3B82F6; --a-3: #6693F7; --a-soft: rgba(37, 99, 235, 0.09); --a-soft-2: rgba(37, 99, 235, 0.16); --a-soft-3: rgba(37, 99, 235, 0.26); --a-shadow: rgba(37, 99, 235, 0.32); --cpe: #2563EB; --ld: #4F46E5; --rm: #8B9BB5; --cpe-soft: rgba(37, 99, 235, 0.10); --ld-soft: rgba(79, 70, 229, 0.12); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"][data-palette="indigo"] { --a: #4D7BFF; --a-2: #6B92FF; --a-3: #89A8FF; --a-soft: rgba(77, 123, 255, 0.14); --a-soft-2: rgba(77, 123, 255, 0.24); --a-soft-3: rgba(77, 123, 255, 0.34); --a-shadow: rgba(77, 123, 255, 0.40); --cpe: #4D7BFF; --ld: #A5B4FC; --rm: #A5B3CC; --cpe-soft: rgba(77, 123, 255, 0.14); --ld-soft: rgba(165, 180, 252, 0.18); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ C4 · FULL VIOLET ═════════════ */ :root[data-palette="violet"] { --a: #2563EB; --a-2: #3B82F6; --a-3: #6693F7; --a-soft: rgba(37, 99, 235, 0.09); --a-soft-2: rgba(37, 99, 235, 0.16); --a-soft-3: rgba(37, 99, 235, 0.26); --a-shadow: rgba(37, 99, 235, 0.32); --cpe: #2563EB; --ld: #7C3AED; --rm: #8B9BB5; --cpe-soft: rgba(37, 99, 235, 0.10); --ld-soft: rgba(124, 58, 237, 0.12); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"][data-palette="violet"] { --a: #4D7BFF; --a-2: #6B92FF; --a-3: #89A8FF; --a-soft: rgba(77, 123, 255, 0.14); --a-soft-2: rgba(77, 123, 255, 0.24); --a-soft-3: rgba(77, 123, 255, 0.34); --a-shadow: rgba(77, 123, 255, 0.40); --cpe: #4D7BFF; --ld: #C4B5FD; --rm: #A5B3CC; --cpe-soft: rgba(77, 123, 255, 0.14); --ld-soft: rgba(196, 181, 253, 0.18); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ D · VELVET SAPPHIRE (monochrome blue) ═════════════ */ :root[data-palette="velvet"] { --a: #1F55A5; --a-2: #2C6DC9; --a-3: #5690E0; --a-soft: rgba(31, 85, 165, 0.10); --a-soft-2: rgba(31, 85, 165, 0.18); --a-soft-3: rgba(31, 85, 165, 0.28); --a-shadow: rgba(31, 85, 165, 0.30); --cpe: #1F55A5; --ld: #132A52; --rm: #6B7C99; --cpe-soft: rgba(31, 85, 165, 0.10); --ld-soft: rgba(19, 42, 82, 0.10); --rm-soft: rgba(107, 124, 153, 0.14); } [data-theme="dark"][data-palette="velvet"] { --a: #4A80D4; --a-2: #6B9CE8; --a-3: #8CB8F0; --a-soft: rgba(74, 128, 212, 0.14); --a-soft-2: rgba(74, 128, 212, 0.24); --a-soft-3: rgba(74, 128, 212, 0.34); --a-shadow: rgba(74, 128, 212, 0.42); --cpe: #4A80D4; --ld: #2C6DC9; --rm: #5A7090; --cpe-soft: rgba(74, 128, 212, 0.14); --ld-soft: rgba(44, 109, 201, 0.14); --rm-soft: rgba(90, 112, 144, 0.14); } /* ═════════════ E · EMBER (warm coral wildcard) ═════════════ */ :root[data-palette="ember"] { --a: #EA580C; --a-2: #F97316; --a-3: #FB923C; --a-soft: rgba(234, 88, 12, 0.09); --a-soft-2: rgba(234, 88, 12, 0.16); --a-soft-3: rgba(234, 88, 12, 0.26); --a-shadow: rgba(234, 88, 12, 0.32); --cpe: #EA580C; --ld: #C2410C; --rm: #78716C; --cpe-soft: rgba(234, 88, 12, 0.10); --ld-soft: rgba(194, 65, 12, 0.10); --rm-soft: rgba(120, 113, 108, 0.12); } [data-theme="dark"][data-palette="ember"] { --a: #FB923C; --a-2: #FDBA74; --a-3: #FED7AA; --a-soft: rgba(251, 146, 60, 0.14); --a-soft-2: rgba(251, 146, 60, 0.24); --a-soft-3: rgba(251, 146, 60, 0.34); --a-shadow: rgba(251, 146, 60, 0.42); --cpe: #FB923C; --ld: #F97316; --rm: #A8A29E; --cpe-soft: rgba(251, 146, 60, 0.14); --ld-soft: rgba(249, 115, 22, 0.14); --rm-soft: rgba(168, 162, 158, 0.12); } /* ═════════════ F · JADE (emerald wildcard) ═════════════ */ :root[data-palette="jade"] { --a: #047857; --a-2: #059669; --a-3: #10B981; --a-soft: rgba(4, 120, 87, 0.09); --a-soft-2: rgba(4, 120, 87, 0.16); --a-soft-3: rgba(4, 120, 87, 0.26); --a-shadow: rgba(4, 120, 87, 0.32); --cpe: #047857; --ld: #064E3B; --rm: #8B9BB5; --cpe-soft: rgba(4, 120, 87, 0.10); --ld-soft: rgba(6, 78, 59, 0.10); --rm-soft: rgba(139, 155, 181, 0.14); } [data-theme="dark"][data-palette="jade"] { --a: #10B981; --a-2: #34D399; --a-3: #6EE7B7; --a-soft: rgba(16, 185, 129, 0.14); --a-soft-2: rgba(16, 185, 129, 0.24); --a-soft-3: rgba(16, 185, 129, 0.34); --a-shadow: rgba(16, 185, 129, 0.42); --cpe: #10B981; --ld: #059669; --rm: #A5B3CC; --cpe-soft: rgba(16, 185, 129, 0.14); --ld-soft: rgba(5, 150, 105, 0.14); --rm-soft: rgba(165, 179, 204, 0.12); } /* ═════════════ G · WARM PARCHMENT ═════════════ */ :root[data-palette="warm"] { --a: #C9A84B; --a-2: #D4B86A; --a-3: #DEC98A; --a-soft: rgba(201, 168, 75, 0.10); --a-soft-2: rgba(201, 168, 75, 0.18); --a-soft-3: rgba(201, 168, 75, 0.28); --a-shadow: rgba(201, 168, 75, 0.28); --cpe: #C9A84B; --ld: #A07800; --rm: #A89F94; --cpe-soft: rgba(201, 168, 75, 0.10); --ld-soft: rgba(160, 120, 0, 0.10); --rm-soft: rgba(168, 159, 148, 0.14); }