/* FamCare — Direction A "Quiet Clinic" Single source of truth for appearance. Import once; never hard-code a value below. */ :root { /* ---- Color: surfaces ---- */ --fc-ink: #16233A; /* frame, headings, primary text */ --fc-ink-raised: #22334F; /* active nav row on ink */ --fc-ink-panel: #1E2E48; /* panel inside an ink block */ --fc-ink-line: #2E3F5C; /* divider on ink */ --fc-paper: #F7F6F3; /* app background */ --fc-card: #FFFFFF; --fc-card-alt: #FAF9F6; /* table header, subtle fill */ --fc-line: #E4E1DA; /* card border */ --fc-line-soft: #EFEDE7; /* divider inside a card */ /* ---- Color: text ---- */ --fc-text: #16233A; --fc-text-muted: #6B7280; --fc-text-faint: #8B93A1; /* eyebrow labels, meta */ --fc-text-on-ink: #FFFFFF; --fc-text-on-ink-2: #C7CEDA; --fc-text-on-ink-3: #95A3BC; /* ---- Color: accents ---- */ --fc-clay: #A64F3F; /* primary action, urgency */ --fc-clay-hover: #7E3728; --fc-clay-soft: #FBEEE9; /* clay badge fill */ --fc-clay-on-ink: #D9A08F; /* clay eyebrow on dark */ --fc-teal: #1F6570; /* secondary/link, confirmed */ --fc-teal-soft: #EAF1F2; --fc-amber: #C89A2B; /* prep needed, soon */ --fc-amber-soft: #FAF4E6; --fc-amber-text: #8A6A17; --fc-neutral-soft: #F1F0EB; --fc-avatar: #E6E2DA; /* ---- Type ---- */ --fc-font-display: "Newsreader", Georgia, serif; --fc-font-ui: "Public Sans", system-ui, sans-serif; --fc-size-hero: 64px; /* date numeral in the next-appointment block */ --fc-size-d1: 32px; /* page greeting */ --fc-size-d2: 28px; /* screen title */ --fc-size-d3: 21px; /* card title */ --fc-size-d4: 19px; /* small card title */ --fc-size-body-lg: 16px; --fc-size-body: 15px; --fc-size-sm: 14px; --fc-size-xs: 13px; --fc-size-eyebrow: 12.5px; --fc-lh-tight: 1.2; --fc-lh-body: 1.55; --fc-eyebrow-tracking: 0.1em; /* ---- Space (4px base) ---- */ --fc-space-1: 4px; --fc-space-2: 8px; --fc-space-3: 12px; --fc-space-4: 16px; --fc-space-5: 20px; --fc-space-6: 26px; --fc-space-7: 32px; --fc-space-8: 40px; /* ---- Radius ---- */ --fc-radius-sm: 8px; /* button, field */ --fc-radius-md: 12px; /* card */ --fc-radius-lg: 16px; /* hero block, mobile card */ --fc-radius-pill: 999px; /* ---- Elevation ---- */ --fc-shadow-card: 0 1px 2px rgba(22,35,58,.04); --fc-shadow-pop: 0 14px 34px rgba(22,35,58,.16); --fc-shadow-frame: 0 16px 40px rgba(22,35,58,.14); /* ---- Controls ---- */ --fc-control-h: 44px; /* minimum hit target, all platforms */ --fc-control-h-lg: 52px; --fc-focus-ring: 0 0 0 3px rgba(31,101,112,.35); --fc-border-field: #DAD6CD; /* ---- Icons ---- */ --fc-icon-stroke: 1.75; --fc-icon-sm: 18px; --fc-icon-md: 22px; --fc-icon-lg: 28px; } /* Comfortable is the default. Compact is a single global switch — set data-density="compact" on . Nothing else changes. */ :root[data-density="compact"] { --fc-space-5: 14px; --fc-space-6: 18px; --fc-space-7: 22px; --fc-space-8: 28px; --fc-size-d1: 26px; --fc-size-d2: 23px; --fc-size-hero: 46px; --fc-size-body-lg: 15px; --fc-size-body: 14px; --fc-radius-lg: 12px; } /* ---- Status semantics — use these names, not the raw colors ---- action-needed clay : a person must do something prep-needed amber : something due before the appointment confirmed teal : nothing required neutral grey : informational */