/* FabrizioTech — theme palettes Three palettes, swappable via `data-theme` on . Default (:root) = Peaches & Cream. Palette | data-theme value | Toggle icon ------------------------------|-------------------|------------ Peaches & Cream (light) | peaches (default) | sun (filled) Steel & Titanium (cool slate) | steel | sun (outline) Deep Midnight & Gold (dark) | midnight | moon (filled) Every rule in styles.css and index.html's inline styles references these — nothing here should be duplicated elsewhere. */ /* ============================================================ 1. PEACHES & CREAM (light — default) Accent is the brand rose-gold #B76E79 — dusty pink-peach, not orange. Reads on cream for small-caps subheads, italic accents, and the CTA. Muted body darkened for readability on cream. ============================================================ */ :root, :root[data-theme="peaches"] { --bg:#F5EFE6; --bg-rgb:245,239,230; --rose-rgb:183,110,121; --wine-rgb:125,61,72; --bg-up:#EFE6D8; --bg-card:#FFFFFF; --bg-card-h:#FAF3EA; --bdr:rgba(226,215,201,0.7); --bdr-h:rgba(226,215,201,1); --wine:#7D3D48; --rose:#B76E79; --rose-g:#C4828C; --rose-l:#B76E79; --cream:#1F2421; --tx:#2F3532; --tx-d:#6B605A; --tx-f:rgba(107,96,90,0.55); --cta-tx:#FFFFFF; --nav-bg:rgba(245,239,230,0.9); --nav-bg-o:rgba(245,239,230,0.97); --glow-soft:rgba(183,110,121,0.22); --glow-medium:rgba(183,110,121,0.16); --glow-deep:rgba(125,61,72,0.22); --rose-hover-bg:rgba(183,110,121,0.12); --hero-glow:rgba(183,110,121,0.15); } /* ============================================================ 2. STEEL & TITANIUM (cool slate — categorized light per project) ============================================================ */ :root[data-theme="steel"] { --bg:#343D46; --bg-rgb:52,61,70; --rose-rgb:192,197,206; --wine-rgb:138,147,156; --bg-up:#3D4750; --bg-card:#4F5B66; --bg-card-h:#58646F; --bdr:rgba(101,115,126,0.35); --bdr-h:rgba(101,115,126,0.7); --wine:#8A939C; --rose:#C0C5CE; --rose-g:#CCD0D8; --rose-l:#D8DCE2; --cream:#FFFFFF; --tx:#EDEEF1; --tx-d:#A7ADBA; --tx-f:rgba(167,173,186,0.55); --cta-tx:#1F2421; --nav-bg:rgba(52,61,70,0.9); --nav-bg-o:rgba(52,61,70,0.97); --glow-soft:rgba(192,197,206,0.2); --glow-medium:rgba(192,197,206,0.15); --glow-deep:rgba(138,147,156,0.18); --rose-hover-bg:rgba(192,197,206,0.1); --hero-glow:rgba(192,197,206,0.12); } /* ============================================================ 3. DEEP MIDNIGHT & GOLD (dark — executive navy + warm amber gold) ============================================================ */ :root[data-theme="midnight"] { --bg:#0B132B; --bg-rgb:11,19,43; --rose-rgb:197,155,39; --wine-rgb:164,126,26; --bg-up:#131B36; --bg-card:#1C2541; --bg-card-h:#252F4D; --bdr:rgba(58,80,107,0.4); --bdr-h:rgba(58,80,107,0.75); --wine:#A47E1A; --rose:#C59B27; --rose-g:#D2AA3B; --rose-l:#DDB959; --cream:#FFFFFF; --tx:#F0F2F7; --tx-d:#8D99AE; --tx-f:rgba(141,153,174,0.55); --cta-tx:#0B132B; --nav-bg:rgba(11,19,43,0.9); --nav-bg-o:rgba(11,19,43,0.97); --glow-soft:rgba(197,155,39,0.22); --glow-medium:rgba(197,155,39,0.15); --glow-deep:rgba(164,126,26,0.2); --rose-hover-bg:rgba(197,155,39,0.12); --hero-glow:rgba(197,155,39,0.15); } /* ============================================================ Smooth crossfade when data-theme changes on . ============================================================ */ body,nav,footer,.theme-toggle,.theme-toggle button{ transition:background-color 0.35s ease,color 0.35s ease,border-color 0.35s ease; }