/* ============================================================ themes.css — Remember · 3 brand identities ============================================================ From the Claude Design handoff (remember-tokens.json + remember-alt-identities.json). ARCHITECTURE — two INDEPENDENT axes: data-palette = hearth | linen | dusk (brand identity) data-theme = light | dark (existing light/dark) This file only re-maps the EXISTING token names already consumed throughout styles.css (--bg, --primary, --accent, --text, --card, --muted, --border, --card-shadow, --overlay-bg, --ill-*). It adds no new selectors and overrides no components, so every screen inherits a palette for free and nothing needs rewriting. Load order matters: this file must come AFTER styles.css so the palette blocks win over the :root / [data-theme] defaults. 'hearth' is the default and intentionally reproduces the current look, so shipping this file changes NOTHING until a user opts in. Dusk is dark-only by design (an evening-ritual brand); selecting it forces the dark token set regardless of data-theme. ============================================================ */ /* ── Shared design tokens (identical across palettes) ── */ :root { /* Spacing scale — 4/8/12/16/20/24/32 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --screen-gutter: 20px; --section-gap: 24px; /* Accessibility floors from the spec */ --hit-min: 44px; --icon-grid: 24px; --icon-stroke: 1.7px; /* ── Review part2 2.5.4 — tokens the screens were missing, which is why they hard-coded gold and had to be re-patched in the dark appendix. One gold pair for the whole app (2.1): the spec values. ── */ --gold: #E0B14B; --gold-deep: #C9962E; --gold-tint: rgba(201, 150, 46, 0.14); --card-raised: #FFFFFF; --danger: #D9483B; /* CTA gradient is always 180deg — 135deg is reserved for decorative fills */ --cta-grad: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); --cta-ink: #221A13; /* Alias attendus par les écrans du push package. Ils pointent sur --cta-grad (défini via var(--gold)) donc linen et dusk restent corrects sans copie. */ --gold-a45: rgba(201, 150, 46, 0.45); --danger-a25: rgba(198, 40, 40, 0.25); /* Ombre du pouce de switch : neutre, identique dans les 3 palettes. */ --switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); /* Ombre portée des bottom sheets (feuille émotions) */ --sheet-shadow: 0 -6px 30px rgba(60, 30, 0, 0.18); /* Encre sur --overlay-bg (toujours un voile sombre) */ --on-overlay: #FFFFFF; /* Surface "coffre" de Your Voice : sombre par intention dans les 3 palettes, donc tokens dédiés plutôt que --bg (qui s'éclaircit en light). */ --vault-bg: #221A13; --vault-ink: #F3EBDD; --vault-muted: rgba(243, 235, 221, 0.7); --gold-grad: var(--cta-grad); --gold-progress: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 100%); /* Readable ink on a --gold-tint pill (light: deep amber, dark: the gold) */ --gold-ink: #8A5A1C; /* Paliers d'opacité de l'or. color-mix() ferait ça en une ligne mais exige iOS 16.2, or le projet cible iOS 15.0 — la couleur serait ignorée et l'élément deviendrait transparent. Valeurs light par défaut. */ --gold-a06: rgba(139, 105, 20, 0.06); --gold-a08: rgba(139, 105, 20, 0.08); --gold-a10: rgba(139, 105, 20, 0.10); --gold-a15: rgba(139, 105, 20, 0.15); --gold-a20: rgba(139, 105, 20, 0.20); --gold-a25: rgba(139, 105, 20, 0.25); --gold-a30: rgba(139, 105, 20, 0.30); --danger-tint: #FFEBEE; --danger-ink: #FFFFFF; /* sur #C62828 : 5.62:1 */ } /* ============================================================ 1 · HEARTH (default) — warm gold + brown. Mirrors the shipped palette so this is a no-op until opted in. ============================================================ */ [data-palette="hearth"] { --bg: #FFF8F0; --card-raised: #FFFFFF; --primary: #8B6914; --accent: #B9713A; /* B1 : était #E8A0BF (rose) — cuivre, règle un-seul-accent */ --text: #2C1810; --card: #FFFFFF; --card-shadow: 0 4px 15px rgba(139, 105, 20, 0.15); --muted: #8A7355; /* 4.50:1 sur blanc (#A89274 n'était qu'à 2.99) */ --border: #EDE0D0; --overlay-bg: rgba(44, 24, 16, 0.45); --ill-ink: #3D2B1F; --ill-paper: #FFFDF8; --ill-soft: rgba(201, 138, 91, 0.16); --ill-accent: #C98A5B; --ill-glow: rgba(228, 167, 84, 0.22); --theme-color-meta: #FFFDF8; color-scheme: light; } [data-palette="hearth"][data-theme="dark"] { /* Spec values from design-ref 2a-2n (review part2, 2.3). The previous set drifted: bg #1A1410, card #2C2218, primary #D4A847, and a --muted of #8A7560 that measured ~3.4:1 on bg — below the accessibility floor the 65% rule in this file already establishes. */ --bg: #221A13; --primary: #E0B14B; --accent: #C9853F; /* B1 : était #C97BA8 (rose) */ --text: #F3EBDD; --card: #2A2117; --card-raised: #2F251A; --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); --muted: rgba(243, 235, 221, 0.62); --border: #3D2E1E; --gold-tint: rgba(224, 177, 75, 0.12); --gold-ink: #E0B14B; --gold-a06: rgba(212, 168, 71, 0.06); --gold-a08: rgba(212, 168, 71, 0.08); --gold-a10: rgba(212, 168, 71, 0.10); --gold-a15: rgba(212, 168, 71, 0.15); --gold-a20: rgba(212, 168, 71, 0.20); --gold-a25: rgba(212, 168, 71, 0.25); --gold-a30: rgba(212, 168, 71, 0.30); --danger: #EF5350; --danger-tint: rgba(239, 83, 80, 0.15); --danger-ink: #2A0A0A; /* #EF5350 est clair : blanc n'y ferait que 3.49:1 */ --overlay-bg: rgba(0, 0, 0, 0.65); --ill-ink: #EAD9C4; --ill-paper: #241B14; --ill-soft: rgba(228, 167, 84, 0.20); --ill-accent: #E4A754; --ill-glow: rgba(228, 167, 84, 0.14); --theme-color-meta: #1A1410; color-scheme: dark; } /* ============================================================ 2 · LINEN & INK — heirloom stationery. Light-first: ink + terracotta on linen, letterpress feel. Muted text is 60% ink (spec floor is 55%). ============================================================ */ [data-palette="linen"] { --bg: #F7F2E9; --primary: #C25E40; /* terracotta */ --accent: #3E7C74; /* teal support */ --text: #2B2B33; /* ink */ --card: #FFFDF8; /* Letterpress: hard offset shadow rather than a soft blur */ --card-shadow: 3px 3px 0 rgba(43, 43, 51, 0.13); --muted: rgba(43, 43, 51, 0.60); --border: rgba(43, 43, 51, 0.15); --overlay-bg: rgba(43, 43, 51, 0.45); --ill-ink: #2B2B33; --ill-paper: #FFFDF8; --ill-soft: rgba(194, 94, 64, 0.14); --ill-accent: #C25E40; --ill-glow: rgba(62, 124, 116, 0.18); --theme-color-meta: #F7F2E9; color-scheme: light; } /* Tighter radii + hard shadows are what make this read as letterpress */ /* The new shared tokens default to hearth's gold; each palette re-points them at its own accent so a CTA is never off-brand (review part2 2.1). */ [data-palette="linen"] { --gold: #C25E40; --gold-deep: #A54B31; --gold-tint: rgba(194, 94, 64, 0.14); --card-raised: #FFFDF8; --cta-ink: #FFFDF8; } [data-palette="linen"][data-theme="dark"] { --gold: #D87A5A; --gold-deep: #B45F41; --gold-tint: rgba(216, 122, 90, 0.16); --card-raised: #333341; --cta-ink: #21212A; } [data-palette="linen"] { --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-s: 6px; --radius-m: 8px; --radius-l: 10px; --elev-1: 2px 2px 0 rgba(43, 43, 51, 0.10); --elev-2: 3px 3px 0 rgba(43, 43, 51, 0.13); --elev-3: 4px 4px 0 rgba(43, 43, 51, 0.16); } /* Linen has a night mode so the palette isn't unusable after dark. */ [data-palette="linen"][data-theme="dark"] { --bg: #21212A; --text: #F2EFE7; --card: #2B2B36; --card-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); --muted: rgba(242, 239, 231, 0.60); --border: rgba(242, 239, 231, 0.16); --overlay-bg: rgba(0, 0, 0, 0.65); --ill-ink: #F2EFE7; --ill-paper: #2B2B36; --ill-soft: rgba(216, 122, 90, 0.18); --ill-accent: #D87A5A; --ill-glow: rgba(90, 158, 148, 0.20); --theme-color-meta: #21212A; color-scheme: dark; } /* Terracotta and teal both lift for AA contrast on the dark ink surface. */ [data-palette="linen"][data-theme="dark"] { --primary: #D87A5A; --accent: #5A9E94; } /* ============================================================ 3 · DUSK — moonlit indigo + celadon. Dark-only by design. Applies to both data-theme values on purpose: picking Dusk in Light mode must not produce an unstyled white screen. ============================================================ */ [data-palette="dusk"], [data-palette="dusk"][data-theme="light"], [data-palette="dusk"][data-theme="dark"] { --gold: #A8C9B8; /* celadon stands in for gold here */ --gold-deep: #85A896; --gold-tint: rgba(168, 201, 184, 0.14); --card-raised: #2A3348; --cta-ink: #191D26; --bg: #191D26; /* night */ --primary: #A8C9B8; /* celadon */ --accent: #8FA3C8; /* haze */ --text: #E9ECF2; /* moon */ --card: #232B3D; /* dusk surface */ --card-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); /* Fond nuit même en mode clair : l'encre or doit être CLAIRE (8.48:1), sinon on hérite de l'or foncé du light et on tombe à 2.86:1. Même or que le dark — une seule paire d'or dans tout le code. */ --gold-ink: #E0B14B; --muted: rgba(233, 236, 242, 0.55); --border: rgba(233, 236, 242, 0.12); --overlay-bg: rgba(10, 13, 20, 0.70); --ill-ink: #E9ECF2; --ill-paper: #232B3D; --ill-soft: rgba(168, 201, 184, 0.16); --ill-accent: #A8C9B8; --ill-glow: rgba(168, 201, 184, 0.25); --theme-color-meta: #191D26; color-scheme: dark; } /* Softer, more modern geometry + glow instead of drop shadows */ [data-palette="dusk"] { --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-s: 14px; --radius-m: 18px; --radius-l: 24px; --elev-1: 0 2px 10px rgba(0, 0, 0, 0.30); --elev-2: 0 6px 20px rgba(0, 0, 0, 0.38); --elev-3: 0 12px 36px rgba(0, 0, 0, 0.46); } /* Celadon glow on the primary action — Dusk's signature. */ [data-palette="dusk"] .capture-btn, [data-palette="dusk"] .btn-primary { box-shadow: 0 0 44px rgba(168, 201, 184, 0.25); } /* Dusk is a dark surface, so the dark-mode component rules in styles.css (which key off [data-theme="dark"]) must also apply when Dusk is selected while the app is in Light mode. Rather than duplicating ~900 lines of those rules, index.html forces data-theme="dark" whenever the Dusk palette is active. */