/* ============================================================ NutriSnap design tokens — from the Identity brand sheet. Day = "Porcelain · Bordeaux" · Night = "Noir · Bordeaux" Theme resolves in this order: OS preference, then an explicit [data-theme] set on (settings toggle) which always wins. ============================================================ */ :root{ /* palette — Day */ --bg:#F7F4ED; --surface:#FFFFFF; --surface-2:#F2EFE6; --hairline:#E9E4D8; --hairline-strong:#DDD5C4; --text:#262019; --text-mid:#55524B; --muted:#97907F; --bordeaux:#6E2F3C; --bordeaux-deep:#5E2733; --bordeaux-soft:#B0616F; --gold:#A98C4B; /* ornament / arcs only */ --gold-bright:#C9A96A; --gold-text:#8A6D2B; /* gold used as TEXT (AA on porcelain) */ --accent:var(--bordeaux); --accent-ink:#FFFFFF; --detail:var(--gold); --detail-text:var(--gold-text); --positive:#3E6E52; --caution:#A9793B; --negative:#A14B33; /* type */ --font-brand:'Marcellus',Georgia,serif; /* wordmark — always */ --font-display:'Prata',Georgia,serif; /* headlines — swaps in Night */ --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* shape + motion */ --radius-card:22px; --radius-sheet:26px; --radius-pill:999px; --shadow-card:0 10px 34px rgba(38,32,25,0.06); --shadow-raised:0 16px 48px rgba(38,32,25,0.12); --fab-glow:0 8px 24px rgba(110,47,60,0.32); --ease-silk:cubic-bezier(0.22,1,0.36,1); --dur-fast:.25s; --dur-med:.45s; --dur-slow:.8s; /* ring/gauge */ --ring-track:#EDE8DC; --ring-a:var(--bordeaux); --ring-b:var(--gold); color-scheme:light; } /* Night via OS preference … */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#0F0D0A; --surface:#17140F; --surface-2:#1D1913; --hairline:rgba(203,169,106,0.16); --hairline-strong:rgba(203,169,106,0.32); --text:#F2ECDF; --text-mid:#CFC8B8; --muted:#8F8878; --accent:var(--gold-bright); --accent-ink:#14100A; --detail:var(--gold-bright); --detail-text:var(--gold-bright); --font-display:'Marcellus',Georgia,serif; --positive:#6FA982; --caution:#C9A25F; --negative:#C67A5E; --shadow-card:0 12px 38px rgba(0,0,0,0.44); --shadow-raised:0 18px 54px rgba(0,0,0,0.56); --fab-glow:0 8px 26px rgba(201,169,106,0.30); --ring-track:rgba(203,169,106,0.14); --ring-a:var(--gold-bright); --ring-b:var(--bordeaux-soft); color-scheme:dark; } } /* … and the explicit toggle, which always wins in both directions */ :root[data-theme="dark"]{ --bg:#0F0D0A; --surface:#17140F; --surface-2:#1D1913; --hairline:rgba(203,169,106,0.16); --hairline-strong:rgba(203,169,106,0.32); --text:#F2ECDF; --text-mid:#CFC8B8; --muted:#8F8878; --accent:var(--gold-bright); --accent-ink:#14100A; --detail:var(--gold-bright); --detail-text:var(--gold-bright); --font-display:'Marcellus',Georgia,serif; --positive:#6FA982; --caution:#C9A25F; --negative:#C67A5E; --shadow-card:0 12px 38px rgba(0,0,0,0.44); --shadow-raised:0 18px 54px rgba(0,0,0,0.56); --fab-glow:0 8px 26px rgba(201,169,106,0.30); --ring-track:rgba(203,169,106,0.14); --ring-a:var(--gold-bright); --ring-b:var(--bordeaux-soft); color-scheme:dark; } :root[data-theme="light"]{ color-scheme:light; }