/* ============================================================= FamBeat — Design Tokens Your family, in rhythm. · Kiosk + Mobile PWA ============================================================= */ /* Fonts loaded from Google Fonts in : - Bricolage Grotesque (display, variable optical-size + width) - Public Sans (body — humanist neutral sans) - JetBrains Mono (time, dates, numerics) */ :root { /* ----------------------------------------------------------- 1. COLOR — LIGHT MODE (Daytime Utility) Warm parchment. No pure white. Anti-glare. Reads under sun. ----------------------------------------------------------- */ /* Surface layers — warm cream, paper-on-paper */ --paper: #F4EEE2; /* app background — warm parchment */ --paper-deep: #ECE4D3; /* recessed wells (input, day-strip troughs) */ --card: #FBF7EE; /* raised cards on the dashboard */ --card-edge: #E2D7BF; /* hairline border tinted to paper */ --rule: #D9CEB5; /* dividers between cards */ /* Ink — warm near-black, never #000 */ --ink: #1F1B14; /* headlines, primary glanceable type */ --ink-2: #4A4337; /* body copy */ --ink-3: #7A6F5C; /* meta, captions, "completed" strike */ --ink-4: #A8997E; /* disabled, placeholder */ /* The four semantic family-data categories. Each has a fill (for the dot/bar) and a wash (for the cell tint). */ --meals: #C0613D; /* terracotta */ --meals-wash: #F4DDD0; --chores: #4F7A55; /* sage */ --chores-wash: #DBE5D2; --appts: #2F5A75; /* deep slate blue */ --appts-wash: #D2DEE6; --reminders: #B98425; /* warm amber */ --reminders-wash:#F1E2C0; /* Status (sync banner, validation) — desaturated, never alarming */ --ok: #4F7A55; --warn: #B98425; --error: #A24A35; --info: #2F5A75; --offline: #7A6F5C; /* uses ink-3, ambient not alarming */ /* Member chips — soft, distinct, NOT the semantic colors */ --m-1: #8B6F47; /* parent A — bronze */ --m-2: #5F6E80; /* parent B — steel */ --m-3: #7B5D7E; /* kid 1 — plum */ --m-4: #4D7A6E; /* kid 2 — eucalyptus */ --m-unassigned:#A8997E; /* dotted outline in usage */ /* ----------------------------------------------------------- 2. TYPE SCALE — kiosk-first Built to read at 3–5 ft from a 12" tablet (≈120 dpi). Minimum body text on kiosk: 22px. Headlines start at 64px. ----------------------------------------------------------- */ /* Font families */ --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Kiosk scale (default) — for 1280×800 fridge tablet */ --t-hero: 96px; /* "Today" + clock */ --t-h1: 64px; /* day name, big counts */ --t-h2: 40px; /* card titles, dashboard zones */ --t-h3: 28px; /* row headers, board column titles */ --t-lead: 24px; /* primary list items */ --t-body: 22px; /* baseline body — never smaller on kiosk */ --t-meta: 18px; /* secondary meta, timestamps */ --t-micro: 15px; /* legal, sync status. minimum allowed */ /* Weights — Bricolage and Public Sans share a 7-step axis */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* Line heights — generous, anti-fatigue */ --lh-tight: 1.05; /* hero, h1 */ --lh-snug: 1.18; /* h2/h3 */ --lh-body: 1.45; /* body */ --lh-loose: 1.6; /* meta blocks */ /* Letter tracking */ --tr-tight: -0.02em; /* display */ --tr-normal: 0em; --tr-cap: 0.08em; /* small all-caps labels */ /* ----------------------------------------------------------- 3. SPACING — 8pt base, generous ----------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px; /* Touch targets — strict floors */ --hit-mobile: 48px; --hit-kiosk: 64px; --hit-primary-kiosk: 88px; /* "Voice Add" and primary actions */ /* ----------------------------------------------------------- 4. RADII — soft, furniture-like, never pill unless action ----------------------------------------------------------- */ --r-1: 6px; /* chips, small tags */ --r-2: 12px; /* inputs, list rows */ --r-3: 20px; /* cards */ --r-4: 28px; /* major dashboard zones */ --r-pill: 999px; /* ----------------------------------------------------------- 5. ELEVATION — paper, not glass No drop shadows that look like floating chrome. Use a soft inset for wells, and a tinted hairline + faint warm shadow for raised cards. Two levels only. ----------------------------------------------------------- */ --shadow-card: 0 1px 0 rgba(31, 27, 20, 0.04), 0 6px 18px -10px rgba(31, 27, 20, 0.18); --shadow-raised: 0 2px 0 rgba(31, 27, 20, 0.05), 0 16px 32px -16px rgba(31, 27, 20, 0.22); --shadow-inset-well: inset 0 1px 0 rgba(31, 27, 20, 0.06), inset 0 -1px 0 rgba(255, 250, 240, 0.6); /* ----------------------------------------------------------- 6. MOTION Calm. Long durations, gentle easing. No bounce. ----------------------------------------------------------- */ --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ============================================================= DARK MODE — Nighttime Ambient Backdrop absorbs light. Tinted warm, not blue. The screen should not illuminate the room. All semantic hues are pulled toward muted, slightly desaturated versions. ============================================================= */ @media (prefers-color-scheme: dark) { :root { --paper: #14110D; /* deep umber, absorbs light */ --paper-deep: #0C0A08; /* recessed wells, darker than app bg */ --card: #1E1A14; /* raised cards */ --card-edge: #2A241B; --rule: #2A241B; --ink: #F2E9D6; /* slightly cream — never pure white */ --ink-2: #C9BDA3; --ink-3: #8A7E66; --ink-4: #5B5142; --meals: #D88662; --meals-wash: #3A2218; --chores: #87AD8B; --chores-wash: #1F2A1F; --appts: #6F9CB6; --appts-wash: #16242E; --reminders: #D9A85A; --reminders-wash:#33260F; --ok: #87AD8B; --warn: #D9A85A; --error: #D08770; --info: #6F9CB6; --offline: #8A7E66; --m-1: #C49A6D; --m-2: #8FA0B6; --m-3: #B392B6; --m-4: #84B3A4; --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.5), 0 6px 22px -10px rgba(0, 0, 0, 0.7); --shadow-raised: 0 2px 0 rgba(0, 0, 0, 0.6), 0 20px 40px -16px rgba(0, 0, 0, 0.8); --shadow-inset-well: inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 245, 225, 0.04); } } /* Manual override class for explicit light previews — overrides @media dark */ .theme-light { --paper: #F4EEE2; --paper-deep: #ECE4D3; --card: #FBF7EE; --card-edge: #E2D7BF; --rule: #D9CEB5; --ink: #1F1B14; --ink-2: #4A4337; --ink-3: #7A6F5C; --ink-4: #A8997E; --meals: #C0613D; --meals-wash: #F4DDD0; --chores: #4F7A55; --chores-wash: #DBE5D2; --appts: #2F5A75; --appts-wash: #D2DEE6; --reminders: #B98425; --reminders-wash:#F1E2C0; --ok: #4F7A55; --warn: #B98425; --error: #A24A35; --info: #2F5A75; --offline: #7A6F5C; --m-1: #8B6F47; --m-2: #5F6E80; --m-3: #7B5D7E; --m-4: #4D7A6E; --shadow-card: 0 1px 0 rgba(31,27,20,0.04), 0 6px 18px -10px rgba(31,27,20,0.18); --shadow-raised: 0 2px 0 rgba(31,27,20,0.05), 0 16px 32px -16px rgba(31,27,20,0.22); --shadow-inset-well: inset 0 1px 0 rgba(31,27,20,0.06), inset 0 -1px 0 rgba(255,250,240,0.6); } /* Manual override class for explicit dark previews */ .theme-dark { --paper: #14110D; --paper-deep: #0C0A08; --card: #1E1A14; --card-edge: #2A241B; --rule: #2A241B; --ink: #F2E9D6; --ink-2: #C9BDA3; --ink-3: #8A7E66; --ink-4: #5B5142; --meals: #D88662; --meals-wash: #3A2218; --chores: #87AD8B; --chores-wash: #1F2A1F; --appts: #6F9CB6; --appts-wash: #16242E; --reminders: #D9A85A; --reminders-wash:#33260F; --ok: #87AD8B; --warn: #D9A85A; --error: #D08770; --info: #6F9CB6; --offline: #8A7E66; --m-1: #C49A6D; --m-2: #8FA0B6; --m-3: #B392B6; --m-4: #84B3A4; --shadow-card: 0 1px 0 rgba(0,0,0,0.5), 0 6px 22px -10px rgba(0,0,0,0.7); --shadow-raised: 0 2px 0 rgba(0, 0, 0, 0.6), 0 20px 40px -16px rgba(0, 0, 0, 0.8); --shadow-inset-well: inset 0 1px 0 rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,245,225,0.04); } /* ============================================================= SEMANTIC ROLES — element-level shortcuts Use these in components so themes swap cleanly. ============================================================= */ html, body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .hero, .h1, .h2, .h3, .lead { font-family: var(--font-display); letter-spacing: var(--tr-tight); color: var(--ink); } .hero { font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: var(--w-semi); } .h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: var(--w-semi); } .h2 { font-size: var(--t-h2); line-height: var(--lh-snug); font-weight: var(--w-semi); } .h3 { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: var(--w-medium); } .lead { font-size: var(--t-lead); line-height: var(--lh-snug); font-weight: var(--w-medium); } .body { font-size: var(--t-body); line-height: var(--lh-body); } .meta { font-size: var(--t-meta); color: var(--ink-3); } .micro { font-size: var(--t-micro); color: var(--ink-3); letter-spacing: var(--tr-cap); text-transform: uppercase; font-weight: var(--w-medium); } .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; letter-spacing: 0; }