/* ============================================================
everyday-skin.css — calm-card reskin of the v3 mobile chassis.
------------------------------------------------------------
Turns the dark "operational" chassis (chassis-tokens/layout/
components.css) into the warm "everyday" language used by the
consumer app (app-everyday.html): sand canvas, white cards,
Fraunces + Geist (no monospace), coral reserved for the primary
action. The per-OS signature colour still comes from each file's
own --accent.
USAGE (per OS file):
1. add Fraunces to the Google Fonts
2. (everyday is light-default)
3.
AFTER the chassis links (token overrides use !important, so
load order vs the inline #os-overrides block doesn't matter)
Pilot: fleet-mobile-v4.html. Rollout = the 3 lines above per app.
============================================================ */
/* ── EVERYDAY LIGHT — the showcase ─────────────────────────── */
:root[data-theme="light"]{
--bg:#FBF7EF!important; --surface:#FFFFFF!important;
--surface-2:#F4EFE4!important; --surface-3:#ECE6D8!important;
--line:rgba(22,36,46,.09)!important; --line-2:rgba(22,36,46,.15)!important;
--ink:#16242E!important; --ink-2:rgba(22,36,46,.62)!important; --ink-3:rgba(22,36,46,.46)!important;
--ink-on-accent:#FFFFFF!important;
--online:#3E9D6F!important; --online-deep:#2F8A5E!important;
--alert:#D65A4A!important; --alert-deep:#C0452F!important; --info:#0A7D8F!important;
--accent-glow:color-mix(in srgb, var(--accent) 12%, transparent)!important;
--r-sm:12px!important; --r-md:16px!important; --r-lg:18px!important; --r-xl:22px!important;
--coral:#E87D56; --amber:#F5A623;
--shadow:0 10px 26px -16px rgba(13,52,62,.40);
--font-display:"Fraunces",Georgia,serif;
}
/* ── EVERYDAY DARK — keep the toggle working (warm charcoal) ── */
:root[data-theme="dark"]{
--bg:#10171B!important; --surface:#172127!important;
--surface-2:#1E2A30!important; --surface-3:#26343B!important;
--line:rgba(255,255,255,.08)!important; --line-2:rgba(255,255,255,.14)!important;
--ink:#F3F1EA!important; --ink-2:rgba(243,241,234,.66)!important; --ink-3:rgba(243,241,234,.42)!important;
--ink-on-accent:#FFFFFF!important;
--accent-glow:color-mix(in srgb, var(--accent) 22%, transparent)!important;
--r-sm:12px!important; --r-md:16px!important; --r-lg:18px!important; --r-xl:22px!important;
--coral:#E87D56; --amber:#F5A623;
--shadow:0 14px 30px -18px rgba(0,0,0,.6);
--font-display:"Fraunces",Georgia,serif;
}
/* Drop the monospace "operational" voice — everyday is Geist + Fraunces.
Numbers stay aligned via the existing font-variant-numeric rules. */
:root{ --mono: var(--font)!important; }
/* ── canvas ────────────────────────────────────────────────── */
html, body{ background:var(--bg)!important; color:var(--ink)!important; }
@media (min-width:481px){
body:not([data-frame]){ background:radial-gradient(120% 90% at 50% 0%, #ECE3D2 0%, #D9CFBC 72%)!important; }
}
.screen{ box-shadow:0 0 60px -22px rgba(0,0,0,.20); }
/* ── top bar ───────────────────────────────────────────────── */
.appbar{ background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand-mark{ background:var(--accent-glow)!important; color:var(--accent)!important;
border-radius:11px!important; box-shadow:none!important; font-family:var(--font-display); }
.icon-btn{ border-radius:50%!important; }
/* ── calm-card surfaces: soft shadow + rounder corners ─────── */
.card, .online-toggle, .settings, .milestone-card, .week-day,
.profile-card, .am-card, .sheet, .kpi{ box-shadow:var(--shadow); }
.card{ padding:13px 14px; }
.card-icon{ border-radius:12px!important; background:var(--accent-glow)!important;
color:var(--accent)!important; border:0!important; }
/* editorial headings + display numerals in Fraunces */
.status-strip .headline, .sheet h2, .profile-card .name{
font-family:var(--font-display)!important; font-weight:600!important; letter-spacing:-.01em!important; }
.kpi .val, .week-day .d-val{
font-family:var(--font-display)!important; font-weight:600!important; }
/* ── KPI strip → calm cards (not a gridline block) ─────────── */
/* 3-up + wrap (auto-fit) so a 4th KPI never clips at ~460px — was a fixed
4-up grid in the chassis; benefits every chassis app at once. */
.kpi-strip{ background:transparent!important; border:0!important; gap:9px!important;
overflow:visible!important; grid-template-columns:repeat(auto-fit,minmax(108px,1fr))!important; }
.kpi{ background:var(--surface)!important; border:1px solid var(--line)!important;
border-radius:15px!important; padding:12px!important; gap:4px!important; }
.kpi .val{ font-size:22px!important; color:var(--accent)!important; }
.kpi .lab{ text-transform:none!important; letter-spacing:.01em!important;
font-size:10px!important; color:var(--ink-2)!important; }
/* ── live status card → white card with accent left bar ────── */
.status-strip,
[data-mode] .status-strip{
background:var(--surface)!important; border:1px solid var(--line)!important;
border-left:4px solid var(--accent)!important; box-shadow:var(--shadow)!important; }
.status-strip .headline,
[data-mode] .status-strip .headline{ color:var(--ink)!important; }
.status-strip .meta, .status-strip .sub,
[data-mode] .status-strip .meta, [data-mode] .status-strip .sub{
color:var(--ink-2)!important; letter-spacing:.02em!important; }
.status-strip .meta .pulse{ box-shadow:none; }
/* ── bottom nav: sand + coral active ───────────────────────── */
.tabbar{ background:color-mix(in srgb, var(--bg) 94%, transparent)!important;
border-top:1px solid var(--line)!important; }
.tab.active{ color:var(--coral)!important; }
/* ── primary action = coral (common CTA class names) ───────── */
.btn-primary, button.primary, .btn.primary, .primary-cta, .cta-primary,
.btn--primary, .pri-btn{
background:var(--coral)!important; color:#fff!important; border-color:var(--coral)!important; }
/* ── chips / tags: pill + sentence case (calmer) ───────────── */
.tag{ border-radius:999px!important; padding:3px 8px!important;
text-transform:none!important; letter-spacing:.01em!important; }
.action-chip, .am-chip, .amc{ border-radius:999px!important; text-transform:none!important;
font-family:var(--font)!important; letter-spacing:.01em!important; }