/* ========================================================================== ASTROMATA · THEME ENGINE — 7 premium palettes (+ Classic) -------------------------------------------------------------------------- How it works, and why it's safe: • The site (tokens.css) and the admin (admin.css) each expose a set of RAW color tokens. Both were hand-copied from the SAME Imperial Vedic palette, so one theme drives both. • This file NEVER changes a token's value at :root. It only overrides token VALUES when is present. So with NO attribute the product looks exactly as it does today — astromata.com is untouched. • A palette is just ~13 role variables (--_deep … --_danger). The shared mapping block below points every site + admin token at those roles once, so adding/tuning a palette means editing colors in ONE place. • Switching is a single attribute change on → instant, no reload. Load AFTER tokens.css (site) and AFTER admin.css (admin). ========================================================================== */ /* ---- SHARED MAPPING: when ANY theme is active, every token follows the role variables that the chosen palette sets below. ------------------------------ */ html[data-theme] { /* public site tokens (tokens.css names) */ --oxblood-950: var(--_deep); --oxblood-900: var(--_dark); --oxblood-800: var(--_primary); --oxblood-700: var(--_primary2); --gold-500: var(--_accent); --gold-600: var(--_accent); /* muted-gold hairlines: header + dropdown borders */ --gold-300: var(--_accent2); --parchment-100: var(--_bg); --parchment-200: var(--_surface); --bronze-300: var(--_border); --ink-800: var(--_ink); --ink-600: var(--_muted); --ink-500: var(--_tert); --cream-100: var(--_onDark); --status-success: var(--_success); --status-warning: var(--_warn); --status-danger: var(--_danger); --gradient-hero: linear-gradient(180deg, var(--_deep) 0%, var(--_dark) 100%); --gradient-gold-line: linear-gradient(90deg, transparent 0%, var(--_accent) 50%, transparent 100%); /* admin tokens (admin.css names) — same roles */ --plum-900: var(--_deep); --plum-800: var(--_dark); --plum-700: var(--_primary); --magenta-500: var(--_accent); --rose-600: var(--_primary); --rose-700: var(--_dark); --gold-400: var(--_accent2); --ivory-50: var(--_bg); --ivory-100: var(--_surface); --ivory-200: var(--_surface); --slate-800: var(--_ink); --slate-600: var(--_muted); --slate-500: var(--_tert); --text-inv: var(--_onDark); --border-soft: var(--_border); } /* ========================================================================== THE PALETTES — each sets 13 role variables. Rule of the system: --_accent (gold/amber) must stay legible on --_primary and --_deep (button text + badges sit on those), so every palette keeps a warm metallic accent; the identity comes from the jewel PRIMARY + bg tint. ========================================================================== */ /* 01 · Royal Blue — sapphire authority, gold accent */ html[data-theme="royal"] { --_deep:#12224F; --_dark:#0C1836; --_primary:#1E3A8A; --_primary2:#274796; --_accent:#E7B33D; --_accent2:#F3D08A; --_bg:#EEF2FB; --_surface:#FFFFFF; --_border:#D3DCEF; --_ink:#17203A; --_muted:#515C7D; --_tert:#6D7796; --_onDark:#F4F7FF; --_success:#1F7A4D; --_warn:#B5820F; --_danger:#B23A34; } /* 02 · Deep Purple — imperial amethyst */ html[data-theme="purple"] { --_deep:#2A1257; --_dark:#1E0D42; --_primary:#4C1D95; --_primary2:#5B2AA6; --_accent:#E7C25B; --_accent2:#F3D896; --_bg:#F5F1FC; --_surface:#FFFFFF; --_border:#E2D6F5; --_ink:#241A38; --_muted:#5E5280; --_tert:#7A6E96; --_onDark:#F7F3FF; --_success:#1F7A4D; --_warn:#B5820F; --_danger:#B23A34; } /* 03 · Emerald Green — temple jade + antique gold */ html[data-theme="emerald"] { --_deep:#063D2E; --_dark:#042E20; --_primary:#065F46; --_primary2:#0A7255; --_accent:#D8B24A; --_accent2:#EED591; --_bg:#EFF7F2; --_surface:#FFFFFF; --_border:#D0E6D9; --_ink:#14261F; --_muted:#47645A; --_tert:#63776D; --_onDark:#F0FBF5; --_success:#1F7A4D; --_warn:#B5820F; --_danger:#B23A34; } /* 04 · Golden Luxury — dark bronze + bright gold (closest to the classic look) */ html[data-theme="golden"] { --_deep:#241B08; --_dark:#171100; --_primary:#4A3A12; --_primary2:#5E4A18; --_accent:#E6C450; --_accent2:#F5DE94; --_bg:#FBF6E8; --_surface:#FFFDF6; --_border:#E8DAB6; --_ink:#2C2410; --_muted:#6E6034; --_tert:#8A7A48; --_onDark:#FCF3D8; --_success:#3F7A46; --_warn:#B07D18; --_danger:#A8443A; } /* 05 · Crimson Red — deep ruby + gold */ html[data-theme="crimson"] { --_deep:#5A0F1B; --_dark:#3D0A12; --_primary:#9B1C31; --_primary2:#B02439; --_accent:#E7B33D; --_accent2:#F3D08A; --_bg:#FCF3F3; --_surface:#FFFFFF; --_border:#EDD3D3; --_ink:#2C1418; --_muted:#71505A; --_tert:#8A6670; --_onDark:#FFF2F2; --_success:#2D6A45; --_warn:#9C7414; --_danger:#7A1E1E; } /* 06 · Sky Blue — airy cyan workspace, deep-teal primary for legible gold */ html[data-theme="sky"] { --_deep:#0A3A52; --_dark:#072A3D; --_primary:#0C577E; --_primary2:#10688F; --_accent:#E6B93F; --_accent2:#F2D68C; --_bg:#EFF9FF; --_surface:#FFFFFF; --_border:#CDE7F3; --_ink:#0C2A38; --_muted:#46697A; --_tert:#627E8E; --_onDark:#EFFAFF; --_success:#1F7A4D; --_warn:#B5820F; --_danger:#B23A34; } /* 07 · Black & Gold — black chrome (sidebar/hero/buttons) + gold on a light, readable workspace. A "black-chrome" theme rather than a full dark mode, so dark text stays legible everywhere (same structure as the other palettes). */ html[data-theme="blackgold"] { --_deep:#0A0A0A; --_dark:#040404; --_primary:#161616; --_primary2:#242424; --_accent:#E2B44C; --_accent2:#F0D48A; --_bg:#F7F4EC; --_surface:#FFFFFF; --_border:#E6DFC9; --_ink:#1C1A17; --_muted:#6B6455; --_tert:#8A8271; --_onDark:#F1E4C4; --_success:#1F7A4D; --_warn:#B5820F; --_danger:#B23A34; } /* 00 · Classic — the original Imperial Vedic oxblood/gold (explicit opt-in; also what an unthemed page shows). Lets a tenant keep the house look. */ html[data-theme="classic"] { --_deep:#2D0A0F; --_dark:#1F0509; --_primary:#4A0E17; --_primary2:#5E1622; --_accent:#E2B44C; --_accent2:#F3D78C; --_bg:#F4EDE3; --_surface:#FBF6EF; --_border:#C4A87C; --_ink:#2C2A26; --_muted:#5E5854; --_tert:#6B6560; --_onDark:#FDF8F0; --_success:#2D5A3D; --_warn:#8B6914; --_danger:#5A1A1A; }