/* ================================================================== MyPetsFiles Design System -- mpf-design-system.css Version 20B. HONESTY NOTE FOR THE TEAM: this file did not exist anywhere in the real project before this delivery. mpf-public.css (built in earlier Version 20A rounds) already references dozens of --mpf-* custom properties and classes like .mpf-btn / .mpf-card / .mpf-widget / .mpf-status-chip / .mpf-progress-ring / .mpf-empty-state / .mpf-status-banner / .mpf-action-tile as if this file already existed. It did not. Every public page (welcome, login, register, pricing) has been loading undefined CSS variables and unstyled component classes this entire time. This file is being built fresh, for the first time, as the real Version 20 foundation -- it is not a restoration of a lost file. It defines exactly the tokens and classes that mpf-public.css, pet-dashboard.css, and every converted Version 20B template actually reference, based on a real grep audit of the current templates tree. Load order (every page must load in this order): 1. mpf-design-system.css (this file -- tokens + primitives) 2. mpf-signature-theme.css (Signature-specific gradients/glow) 3. mpf-public.css OR pet-dashboard.css (page-family composition) ================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ================================================================== Version 20C -- Three-skin-ready token architecture. The full token set is defined twice, with identical values, on purpose: 1. :root -- the universal fallback. Every page that has NOT yet been given a data-mpf-theme attribute (or that only sets data-mpf-root/data-mpf-mode from earlier rounds) still gets the correct dark Signature colors, so this change cannot regress any already-shipped page. 2. [data-mpf-theme="signature-blue"] -- the real, named default skin. This is where a future [data-mpf-theme="signature-purple"] or [data-mpf-theme="signature-emerald"] block gets added later -- same variable names, different values, set on . Nothing else in the codebase needs to change to add a skin; only this file does. Component CSS everywhere else in the project (mpf-public.css, pet-dashboard.css, every template) keeps using the same variable names it already does (--mpf-bg-page, --mpf-surface-1, etc.) -- those names are NOT being renamed. A short list of aliases matching an alternate naming convention is included at the bottom of this block for anyone referencing tokens that way; they point at the exact same values, not a second source of truth. ================================================================== */ :root, [data-mpf-theme="signature-blue"]{ /* ---------- Core palette (dark Signature navy) ---------- */ --mpf-navy:#0a1428; --mpf-navy-2:#0f1e3d; --mpf-bg-page:#0a1428; --mpf-surface-1:#101f3d; --mpf-surface-2:#152a4d; --mpf-surface-3:#1b3459; --mpf-border:rgba(255,255,255,.10); --mpf-border-strong:rgba(92,155,255,.42); --mpf-edge:rgba(255,255,255,.06); /* ---------- Text ---------- */ --mpf-text-primary:#f3f6fb; --mpf-text-secondary:#9fb0cc; --mpf-text-muted:#6d7fa0; /* ---------- Brand / status ---------- */ --mpf-accent:#3b82f6; --mpf-accent-2:#2563eb; --mpf-accent-cyan:#22d3ee; --mpf-success:#22c55e; --mpf-success-bg:rgba(34,197,94,.14); --mpf-warning:#f59e0b; --mpf-warning-bg:rgba(245,158,11,.14); --mpf-danger:#ef4444; --mpf-danger-bg:rgba(239,68,68,.14); /* ---------- Radius scale ---------- */ --mpf-radius-sm:8px; --mpf-radius-md:14px; --mpf-radius-lg:20px; --mpf-radius-xl:28px; --mpf-radius-pill:999px; /* ---------- Shadow scale ---------- */ --mpf-shadow-sm:0 2px 8px rgba(0,0,0,.25); --mpf-shadow-md:0 10px 30px rgba(0,0,0,.35); --mpf-shadow-lg:0 20px 50px rgba(0,0,0,.45); /* ---------- Spacing scale ---------- */ --mpf-space-1:4px; --mpf-space-2:8px; --mpf-space-3:12px; --mpf-space-4:20px; --mpf-space-5:28px; --mpf-space-6:40px; /* ---------- Type scale ---------- */ --mpf-text-caption:12.5px; --mpf-text-body:15px; --mpf-text-h3:19px; --mpf-text-h2:24px; --mpf-text-h1:32px; --mpf-weight-regular:400; --mpf-weight-medium:600; --mpf-weight-bold:800; --mpf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---------- Alternate-naming aliases (same values, not a second source of truth -- see note above) ---------- */ --mpf-bg:var(--mpf-bg-page); --mpf-bg-elevated:var(--mpf-surface-1); --mpf-surface:var(--mpf-surface-2); --mpf-surface-raised:var(--mpf-surface-3); --mpf-surface-soft:var(--mpf-surface-1); --mpf-text:var(--mpf-text-primary); --mpf-primary:var(--mpf-accent); --mpf-primary-hover:var(--mpf-accent-2); --mpf-shadow:var(--mpf-shadow-md); } html, body[data-mpf-root]{ background:var(--mpf-bg-page); color:var(--mpf-text-primary); font-family:var(--mpf-font-family); font-size:var(--mpf-text-body); line-height:1.5; margin:0; } body[data-mpf-root] a{ color:inherit; } body[data-mpf-root] h1, body[data-mpf-root] h2, body[data-mpf-root] h3{ color:var(--mpf-text-primary); font-weight:var(--mpf-weight-bold); margin:0 0 var(--mpf-space-2); } body[data-mpf-root] p{ color:var(--mpf-text-secondary); margin:0 0 var(--mpf-space-3); } /* ================================================================== Buttons -- .mpf-btn ================================================================== */ .mpf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; /* Phase C: Global Styles indirection -- --mpf-btn-radius/-padding-y/ -padding-x/-min-height are ONLY ever set inside cms_page.html's Global Styles