/* Beth Design System — Color Tokens Direction B (Light): • Warm off-white canvas, white cards • Sage is a SEMANTIC ACCENT (hero band, active state, primary CTA), not the canvas • Card surfaces are lifted by a 0.5px hairline border + soft shadow • Sparkle mauve is a quiet secondary-UI accent (Beth's voice is green) • Green is Beth's voice AND the shared-with-household STATE — never a calendar colour, never a person (app: src/theme.js, D-TB-1 / D-TB-8) SOURCE OF TRUTH: the app's src/theme.js. Every value here is copied from it, never re-picked — scripts/ds-tokens-check.mjs fails when they drift. Tokens are NAMED so a dark variant can later be added by overriding just the semantic aliases in a `:root[data-theme="dark"]` block — no consumer code needs to change. */ :root { /* ─────────── Raw brand colors ─────────── */ /* Greens — sage is a semantic accent, not the canvas */ --color-sage: #7D9185; /* ★ core brand — hero band, active state, primary CTA */ --color-sage-mid: #A8BFA3; /* accents, dot markers */ --color-sage-light: #CFD4BE; /* avatar tint (sage member) */ --color-sage-soft: #E1E7DC; /* soft sage tint — chips, hover, the "today" pill */ --color-green-deep: #3D5C48; /* deep sage — avatar ink, badge text */ --color-green-darkest:#22302A; /* deepest green — dinner / data-scale ink */ /* Beth / user-data category scale — light→dark WITHIN the green family. RULE: anything Beth generates or that's derived from the user's own data is accented ONLY in green. Step the family light→dark to tell categories apart (e.g. meal types: breakfast→lunch→dinner). Add shades here as needed; never reach outside the green family for Beth/data content. */ --green-cat-1: #CFD4BE; --green-cat-1-ink: #3D5C48; /* lightest — e.g. breakfast */ --green-cat-2: #A8BFA3; --green-cat-2-ink: #34433D; /* mid — e.g. lunch */ --green-cat-3: #7D9185; --green-cat-3-ink: #22302A; /* deep — e.g. dinner */ /* Blues — a secondary accent (app: theme.userText / userMid / userBg): the repeat marker on recurring will-dos, the grocery export's "on your list" tag, list tiles, and one colour in the Note tab's list-people chips palette. A signed-in person takes their avatar colour (--member-*). */ --color-user-blue: #607F9A; --color-user-mid: #90ADC6; --color-user-bg: #E8EFF5; /* ─────────── Mauves — quiet secondary accents ─────────── Delete and warning text, uppercase field labels (theme.mauve / fieldHeader), the rose tint behind remove states (theme.rose = mauve-mid), overdue will-do dates (theme.sparkle). Beth's voice is green — see --beth-voice below. */ --color-mauve: #A8879D; --color-mauve-mid: #BAA4B3; --color-mauve-bg: #D4CDD3; --color-sparkle: #9A7396; /* overdue will-do dates */ --color-sparkle-soft: #EFE5EE; /* sparkle pill background */ --color-dot-event: #C6A5C2; /* calendar event indicator */ /* ─────────── Direction B Light surfaces ─────────── */ --color-canvas: #F2EFEA; /* warm off-white page bg */ --color-card: #FFFFFF; /* white card surface */ --color-card-border: #E8E3DB; /* hairline 0.5px border on cards */ --color-field-soft: #F5F2EC; /* recessed inset / inactive toggle track */ /* ─────────── Text ─────────── */ --color-text-primary: #34433D; --color-text-secondary: #7B8A82; --color-text-muted: #9AA39B; /* ─────────── Warm neutrals ─────────── */ --color-cream: #FFFFFF; /* = the card surface */ --color-field: #F5F2EC; /* = field-soft */ --color-linen: #E8E3DB; /* = card-border */ --color-accent-1: #EDE1C1; --color-accent-2: #E2D2A6; --color-charcoal: #303030; --color-header-text: #FFFFFF; /* text + wordmark on sage hero band */ --color-frame-accent: #F8F4D9; --color-paper: #F2EFEA; /* ─────────── Control surfaces ─────────── */ --color-control-tint: var(--color-field-soft); /* unselected pill / chip */ --color-sage-outline: #9BAE9E; /* secondary button outline */ /* ─────────── Avatar palette ("dusk") ─────────── One muted pastel per person, in rainbow order (warm → blue → purple → pink). RULE: a PERSON (and anything they added) takes their AVATAR colour — never green. Green is Beth's and the shared-with-household state's (see --household-icon below): `--avatar-sage` is Beth's green and is never a person's. */ --avatar-coral: #F1CDBD; --avatar-coral-ink: #A86750; --avatar-butter: #EEE0AD; --avatar-butter-ink: #876A46; --avatar-azure: #B7D2F2; --avatar-azure-ink: #486A9D; --avatar-violet: #CEC3EA; --avatar-violet-ink: #6B5A9E; --avatar-mallow: #EBCEDA; --avatar-mallow-ink: #A0657F; --avatar-sage: #CFD4BE; --avatar-sage-ink: #3D5C48; /* RESERVED — Beth/data, never a member */ /* ─────────── Semantic warn family (df1, R-df1-7) ─────────── The system's FIRST warn/danger tokens: clay-toned for allergy, ochre-toned for preference — muted register, no alarm-red (Beth doesn't shout). Deliberately deeper and warmer than any avatar tint: pastel avatar hues mean PEOPLE, and a warning card must never read as "someone's color." ⛔ Named warn-*, never clay/ochre: `clay` is a calendar-swatch id (#D0A290); reusing the word with a different hex invites a bug. Mirrored in src/theme.js as warnAllergy* / warnPref*. */ --warn-allergy-bg: #F6E0DB; /* soft clay tint — card surface */ --warn-allergy-line: #C0705F; /* clay accent bar + icon */ --warn-allergy-ink: #8A4437; /* text on the tint */ --warn-pref-bg: #F5ECCF; /* soft ochre tint — card surface */ --warn-pref-line: #BA9440; /* ochre accent bar + icon */ --warn-pref-ink: #77602A; /* text on the tint */ /* ─────────── Month-grid marks (D-S13-3) ─────────── A holiday or a birthday is a different KIND of thing from an event, so it never gets a dot (dots mean "something of yours") and never a box. It gets a 2px line ABOVE the day number, inset from the tile edge; the number itself never changes colour or weight. A day that is both shows the birthday line — the person wins. Mirrors theme.markHoliday / markBirthday. */ --mark-holiday: #AEB4AD; /* sage-grey — a holiday / observance */ --mark-birthday: #E2CB6E; /* butter-yellow — a birthday */ /* ─────────── Calendar swatches — THE six (ov6 M3e; app: CALENDAR_SWATCHES) ─────────── The only colours a calendar colour picker offers. Two reservations: green is Beth's / the household state's (never a calendar), and the avatar fills are PEOPLE's. A SYNCED calendar (iPhone / Google) is painted with the NEAREST of these six to its provider colour (D-FB23-11) — never household green, never sage, never an avatar fill. Home and every added calendar are recolourable; only `personal` follows the viewer's avatar colour. */ --calendar-swatch-clay: #D0A290; --calendar-swatch-dusty-rose: #D8A7B0; --calendar-swatch-sand: #DECCA6; --calendar-swatch-powder: #AEC6E4; --calendar-swatch-periwinkle: #ABA7D9; --calendar-swatch-plum: #B296AB; /* ─────────── Semantic aliases ─────────── Consumers should ALWAYS reference these, not the raw color tokens. This is where a dark variant would override. */ --bg-canvas: var(--color-canvas); --bg-card: var(--color-card); --bg-hero: var(--color-sage); /* sage hero band */ --bg-field: var(--color-field-soft); --bg-inset: var(--color-field-soft); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-on-canvas: var(--color-text-primary); /* text reads on warm off-white */ --text-on-hero: #FFFFFF; /* text reads on sage hero */ --text-on-hero-dim: rgba(255, 255, 255, 0.78); --text-beth: var(--color-green-deep); --text-label: var(--color-text-secondary); --text-dim: var(--color-text-muted); --text-sparkle: var(--color-sparkle); --border-card: var(--color-card-border); /* apply at 0.5px */ --border-divider: var(--color-card-border); --border-subtle: var(--color-card-border); --accent: var(--color-sage); /* primary semantic accent */ --accent-soft: var(--color-sage-soft); --accent-sparkle: var(--color-mauve); /* mauve accent */ --accent-sparkle-soft:var(--color-sparkle-soft); /* sparkle pill background */ /* ─────────── Beth's voice — GREEN ─────────── Smart recommendations, nudges, and any moment of Beth speaking to the user read in green. Green is Beth's voice AND her data — pastel avatar hues are people. */ --beth-voice: var(--color-green-deep); /* Beth speaking / smart text + icon */ --beth-voice-bg: var(--color-sage-soft); /* nudge / recommendation card surface */ --beth-voice-line: var(--color-sage); /* accent bar on a Beth surface */ --met-tint: #F3F6F1; /* gr2: a met goal's card / row tint */ --met-border: #D8E0D3; /* gr2: a met goal's card border */ /* ─────────── Member accent — the ACTIVE person ─────────── The viewer's avatar pair. The app computes it per person at runtime (memberPairFor, src/calendarColors.js); these default to the azure member so a mock can draw with it. To re-skin per person, set --member-accent + --member-ink on a screen root. The tint is the app's own: the avatar fill at ~45% (memberPair.fill + '73' — the active "just me" / sub-toggle fill in DailyTab, WillDoBody, listsStyles). The sage hero band, active nav pill and primary CTA stay sage; Beth's surfaces stay green. */ --member-accent: var(--avatar-azure); --member-ink: var(--avatar-azure-ink); --member-tint: color-mix(in srgb, var(--member-accent) 45%, transparent); /* active "just me" / sub-toggle fill */ /* The shared-with-household STATE (D-TB-1, Sep 15) — ONE pair for every surface that says "this is the household's, not one person's": the View today toggle's household segment, the Note "shared with your household" chips, the will-dos toggle, "add to: my home", the Settings household avatar — each with the HousePlus glyph. DELIBERATELY the same pair as Beth's voice surfaces (--beth-voice-bg / --beth-voice): green is Beth's AND the shared-with-household state. It is never a calendar colour (D-TB-8 — the home calendar keeps its own stored colour) and never a person. It is one pair for everyone — never a per-person colour (D-TB-2). Mirrors theme.household. */ --household-icon: var(--color-sage-soft); /* #E1E7DC fill */ --household-icon-ink: var(--color-green-deep); /* #3D5C48 glyph */ /* ─────────── Shadows (referenced from tokens/shadows.css) ─────────── */ --shadow-color: rgba(52, 67, 61, 0.05); --shadow-color-deep: rgba(52, 67, 61, 0.10); }