/* =================================================================== Market Pulse — Theme Pack Six swappable looks, driven entirely through the CSS variables your app already uses. Activated by a data-theme attribute on : (set for you by mp-themes.js) No data-theme attribute = your original Bakery Amber default. =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Caveat:wght@600;700&family=DM+Serif+Display&family=Hanken+Grotesk:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Space+Grotesk:wght@400;500;600;700&family=Spectral:wght@400;500;600;700&display=swap'); /* ---- 01 · Heirloom Market — cream paper · forest green · terracotta ---- */ :root[data-theme="heirloom"] { --bg:#faf6ec; --panel:#f2ebda; --panel-2:#e9e0cd; --border:#e2d9c5; --text:#2b2a26; --muted:#9a8f78; --accent:#2f5d3f; --accent-2:#c0623d; --on-accent:#f6f1e4; --good:#3f7d52; --warn:#b9852b; --bad:#b34a36; --radius:12px; --shadow:0 10px 26px -16px rgba(70,55,30,.5); --font-head:'DM Serif Display',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; } /* ---- 02 · Maison Noir — warm charcoal · brushed brass · ivory ---- */ :root[data-theme="noir"] { --bg:#15110d; --panel:#1b1610; --panel-2:#241d14; --border:#2c241a; --text:#efe7d8; --muted:#8a7c5f; --accent:#c9a24b; --accent-2:#d8b35e; --on-accent:#1a140c; --good:#7faf6a; --warn:#d8b35e; --bad:#cf6a59; --radius:12px; --shadow:0 18px 40px -20px rgba(0,0,0,.7); --font-head:'Playfair Display',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; } /* ---- 03 · Linen & Sage — soft linen · sage · clay ---- */ :root[data-theme="linen"] { --bg:#f4f2ea; --panel:#ece9de; --panel-2:#e3dfd0; --border:#ddd9cb; --text:#34352f; --muted:#a39e8c; --accent:#6f7d5a; --accent-2:#b08968; --on-accent:#f7f6f0; --good:#6f7d5a; --warn:#b08968; --bad:#b06a5a; --radius:12px; --shadow:0 10px 26px -18px rgba(60,60,40,.45); --font-head:'Spectral',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; } /* ---- 04 · Night Market — ink black · electric lime · hot magenta ---- */ :root[data-theme="night"] { --bg:#0c0c0e; --panel:#121215; --panel-2:#1a1a1f; --border:#26262c; --text:#ececea; --muted:#8b8b95; --accent:#c4f000; --accent-2:#ff3d7f; --on-accent:#0c0c0e; --good:#c4f000; --warn:#ffcb45; --bad:#ff3d7f; --radius:10px; --shadow:0 18px 40px -20px rgba(0,0,0,.8); --font-head:'Anton',Impact,sans-serif; --font-body:'Space Grotesk',system-ui,sans-serif; } /* ---- 05 · Citrus Stand — bright white · tangerine · grape ---- */ :root[data-theme="citrus"] { --bg:#fffdf7; --panel:#fff3e4; --panel-2:#fff8ee; --border:#161410; --text:#161410; --muted:#9a8f7e; --accent:#ff6a1a; --accent-2:#5b3cc4; --on-accent:#fffdf7; --good:#2f9e44; --warn:#e8a13a; --bad:#e2674a; --radius:12px; --shadow:none; --font-head:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; } /* ---- 06 · Chalk & Crate — chalkboard slate · lemon · coral ---- */ :root[data-theme="chalk"] { --bg:#1c211c; --panel:#202720; --panel-2:#232b23; --border:#313a31; --text:#f3efe3; --muted:#7e8a7e; --accent:#ffd23f; --accent-2:#ff7a59; --on-accent:#1c211c; --good:#8bbf6a; --warn:#ffd23f; --bad:#ff7a59; --radius:12px; --shadow:0 18px 40px -20px rgba(0,0,0,.6); --font-head:'Caveat',cursive; --font-body:'Hanken Grotesk',system-ui,sans-serif; } /* =================================================================== Shared overrides — apply to ANY active theme. These translate the variables above onto a few spots your base CSS hard-coded. =================================================================== */ :root[data-theme] body { font-family: var(--font-body); } :root[data-theme] .page-title, :root[data-theme] .brand, :root[data-theme] .stat .n { font-family: var(--font-head); } /* Text colour on accent-filled surfaces (your base CSS hard-codes #1a1206) */ :root[data-theme] .nav button.active, :root[data-theme] button.btn, :root[data-theme] .pill-tabs button.active { color: var(--on-accent); } :root[data-theme] button.btn.secondary { color: var(--text); } :root[data-theme] button.btn.ghost { color: var(--accent-2); } :root[data-theme] .pill-tabs button.active { border-color: var(--accent); } :root[data-theme] .stepper .step.active .num { color: var(--on-accent); } /* --- Per-theme flourishes --- */ /* Night Market: condensed all-caps display headings */ :root[data-theme="night"] .page-title { text-transform: uppercase; letter-spacing: .01em; } :root[data-theme="night"] .brand { text-transform: uppercase; letter-spacing: .02em; } /* Citrus Stand: neo-brutalist hard borders + offset shadows */ :root[data-theme="citrus"] .card { border-width: 2px; box-shadow: 4px 4px 0 #161410; } :root[data-theme="citrus"] .stat { border-width: 2px; } :root[data-theme="citrus"] button.btn { border: 2px solid #161410; box-shadow: 3px 3px 0 #161410; } :root[data-theme="citrus"] button.btn:active { box-shadow: 0 0 0 #161410; transform: translate(3px,3px); } :root[data-theme="citrus"] .nav button.active { box-shadow: 3px 3px 0 #161410; } :root[data-theme="citrus"] .page-title { letter-spacing: -.02em; } /* Chalk & Crate: oversized hand-lettered headings */ :root[data-theme="chalk"] .page-title { font-size: 2.2rem; line-height: 1.05; color: var(--accent); } :root[data-theme="chalk"] .brand { font-size: 1.55rem; color: var(--accent); } :root[data-theme="chalk"] .stat .n { font-size: 1.9rem; } /* Elegant serif themes: a touch more air under page titles */ :root[data-theme="heirloom"] .page-title, :root[data-theme="noir"] .page-title, :root[data-theme="linen"] .page-title { font-weight: 400; letter-spacing: .01em; }