/* ===== Snacknap theme tokens — single source of truth for chrome colors ===== Drives both our components and Bootstrap 5.3 (via data-bs-theme on ). Light values mirror the current hardcoded palette so migration is 1:1. */ :root, [data-bs-theme=light]{ /* surfaces */ --snk-bg:#f7f7f7; --snk-surface:#ffffff; --snk-surface-2:#fbfcfd; --snk-surface-3:#f6f8fb; /* borders / hairlines */ --snk-border:#eaecf0; --snk-border-subtle:#f2f4f7; --snk-border-strong:#e4e7ec; --snk-hairline:#eef0f3; /* ink (text) ramp */ --snk-text:#101828; --snk-ink-800:#1d2939; --snk-ink-700:#344054; --snk-ink-600:#475467; --snk-ink-500:#667085; --snk-text-muted:#98a2b3; --snk-ink-300:#b6bcc7; /* slate / blue-grey */ --snk-slate:#64748b; --snk-slate-400:#94a3b8; --snk-slate-300:#cbd5e1; /* accent (snacknap brand blue) */ --snk-accent:#3a5a9c; --snk-accent-2:#5b82d6; /* semantic */ --snk-success:#16a34a; --snk-warning:#e0951a; --snk-danger:#dc2626; /* existing */ --snk-brand:#f5d673; --snk-shadow:rgba(16,24,40,.08); color-scheme:light; } [data-bs-theme=dark]{ --snk-bg:#0f1216; --snk-surface:#171b21; --snk-surface-2:#1d222a; --snk-surface-3:#12161c; --snk-border:#2a313c; --snk-border-subtle:#222831; --snk-border-strong:#353d49; --snk-hairline:#262d37; --snk-text:#e7eaf0; --snk-ink-800:#dfe4ec; --snk-ink-700:#c9d2de; --snk-ink-600:#aab4c2; --snk-ink-500:#8b97a8; --snk-text-muted:#8b95a5; --snk-ink-300:#5b6573; --snk-slate:#94a3b8; --snk-slate-400:#7e8a9c; --snk-slate-300:#3a434f; --snk-accent:#7fa0e0; --snk-accent-2:#7d9ce6; --snk-success:#3fbf6b; --snk-warning:#f0b03e; --snk-danger:#f06b6b; --snk-brand:#f5d673; --snk-shadow:rgba(0,0,0,.45); color-scheme:dark; } /* Smooth (but quick) theme transition on the big surfaces; opt-out for motion. */ @media (prefers-reduced-motion: no-preference){ body{ transition:background-color .2s ease, color .2s ease; } } /* ---- theme toggle ---- */ .snk-theme-toggle .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.35rem .55rem; } .snk-theme-toggle .btn svg{ width:18px; height:18px; } .snk-theme-toggle .btn[aria-checked=true]{ background:var(--snk-brand); color:#32414A; } @media (max-width:991.98px){ .snk-theme-toggle{ margin:.5rem 0; } } /* Bridge Bootstrap surface/text vars to the Snacknap dark ramp. html[data-bs-theme=dark] (element+attr) outranks Bootstrap's [data-bs-theme=dark], so this applies even though bootstrap.min.css loads after this file. */ html[data-bs-theme=dark]{ --bs-body-bg:var(--snk-bg); --bs-body-color:var(--snk-text); --bs-secondary-bg:var(--snk-surface); --bs-tertiary-bg:var(--snk-surface-2); --bs-secondary-color:var(--snk-text-muted); --bs-tertiary-color:var(--snk-ink-500); --bs-border-color:var(--snk-border); --bs-emphasis-color:var(--snk-text); --bs-card-bg:var(--snk-surface); --bs-card-cap-bg:var(--snk-surface-2); }