/* ── GENERATED by build.py from tokens.json — DO NOT EDIT BY HAND ───────────── Canonical theme palette for all eagleadams86 apps (source of truth: github.com/eagleadams86/claude-theme-pack, local: ~/claude-theme-pack). Themes: midnight (the base palette, in :root), dark, light, sepia — selected with data-theme="…" on . Every pair below clears WCAG AA; check_contrast.py in the pack is the gate. --text-hint sits at the 4.5:1 floor — never fade it further. To change ANYTHING here: edit tokens.json in the pack, rebuild, re-verify, then copy the generated file into each app. ──────────────────────────────────────────────────────────────────────────── */ :root { /* Midnight — the base palette: what :root is filled with, and what an unknown saved theme id falls back to. NOT the same as the default an app picks when nothing is saved, which is "auto" — see the [data-theme="auto"] block below. */ --bg: #0a0e1a; --surface: #121829; --surface-alt: #1b2238; --border: #262f4a; --border-strong: #374163; --text-primary: #e7eaf6; --text-secondary: #aab2d0; --text-muted: #838cab; --text-hint: #7f88a9; --accent: #818cf8; --on-accent: #0a0e1a; --accent-bg: #242b4a; --focus-border: #818cf8; --border-control: #5a6ba2; --ok: #72fe84; --warn: #efbe39; --serious: #f79b5c; --err: #fb7874; --ok-bg: #1e3635; --warn-bg: #322c1b; --serious-bg: #32241b; --err-bg: #321b1b; --btn-bg: #e7eaf6; --btn-text: #0a0e1a; --input-border: #5a6ba2; --spinner-track: #262f4a; --spinner-head: #7e87a8; --series-1: #999cea; --series-2: #ba8d12; --series-3: #54c693; --series-4: #cf5d9c; --series-5: #bd5a39; --radius: 10px; --radius-sm: 6px; --radius-pill: 999px; /* Type — web only. REM, off a 16px root, so browser zoom and a reader's own default text size both work with no help from the page (WCAG 1.4.4 Resize Text). A page that wants this has to leave the root alone: no `html { font-size: 14px }`, and no `maximum-scale=1` in the viewport meta, which takes pinch-zoom away from everyone and breaks the same criterion on a phone. The ramp is the 11/12/13/14/17/22/30px scale this pack shipped until 2026-08-22, scaled by 16/13 and rounded to whole pixels at that root: same shape, base moved from 13px to 16px. The px equivalent is in each comment below, because that is the number an app author is picturing. Mobile deliberately does NOT get fixed sizes; see the role map in Theme.kt / Theme.swift, which maps these roles onto the platform's scaling text styles. */ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --fs-xs: 0.8125rem; /* 13px · Chrome, labels, hints, captions, badges, footers, table headings */ --fs-sm: 0.9375rem; /* 15px · Table and list rows, toasts, secondary prose */ --fs-base: 1rem; /* 16px · Body text, prose, controls and buttons */ --fs-md: 1.0625rem; /* 17px · The app name, card headings, dialog headings */ --fs-lg: 1.3125rem; /* 21px · A heading that owns a whole panel — rare, most headings are md */ --fs-xl: 1.6875rem; /* 27px · Page titles, and the big figure on a summary tile */ --fs-display: 2.3125rem; /* 37px · The one hero figure on a page that has one */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-base: 1.5; --lh-loose: 1.7; --ls-tight: -0.01em; --ls-label: 0.06em; /* Never set --text-muted, --text-hint below --fs-xs (13px), and never let that step itself fall under 12px. Both tiers sit at or near the 4.5:1 contrast floor, and passing the contrast gate is not the same as being readable — check_contrast.py gates the second half of that. */ /* Spacing — 2px steps to 8px, 4px to 16px, then 8px and up. */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 24px; --sp-8: 32px; --sp-9: 48px; /* Back-compat aliases (old lottery/portfolio names) — defined once, track the active theme via var() */ --bg-card: var(--surface); --bg-card-alt: var(--surface-alt); --surface2: var(--surface-alt); --border2: var(--border-strong); --text: var(--text-primary); --text2: var(--text-secondary); --text3: var(--text-muted); --green: var(--ok); --red: var(--err); --amber: var(--warn); --green-bg: var(--ok-bg); --red-bg: var(--err-bg); --amber-bg: var(--warn-bg); --unit-active-bg: var(--btn-bg); --unit-active-txt: var(--btn-text); --chart-tick: var(--text-muted); --chart-grid: var(--border); } [data-theme="dark"] { /* Dark */ --bg: #13151b; --surface: #1c1f27; --surface-alt: #262a33; --border: #2d313b; --border-strong: #3d424e; --text-primary: #eef0f5; --text-secondary: #adb1bd; --text-muted: #9396a3; --text-hint: #8c909d; --accent: #eef0f5; --on-accent: #13151b; --accent-bg: #3c3e46; --focus-border: #eef0f5; --border-control: #6a7387; --ok: #72fe84; --warn: #efbe39; --serious: #f79b5c; --err: #fb7874; --ok-bg: #273c33; --warn-bg: #322c1b; --serious-bg: #32241b; --err-bg: #321b1b; --btn-bg: #eef0f5; --btn-text: #13151b; --input-border: #6a7387; --spinner-track: #2d313b; --spinner-head: #9396a3; --series-1: #999cea; --series-2: #ba8d12; --series-3: #54c693; --series-4: #cf5d9c; --series-5: #bd5a39; } [data-theme="light"] { /* Light */ --bg: #f5f5f3; --surface: #ffffff; --surface-alt: #f0f0ee; --border: #e0e0dd; --border-strong: #c8c8c4; --text-primary: #111110; --text-secondary: #555551; --text-muted: #656562; --text-hint: #6d6d6d; --accent: #266dc3; --on-accent: #ffffff; --accent-bg: #e9f0f9; --focus-border: #266dc3; --border-control: #8a8a82; --ok: #0b7a67; --warn: #7e6a07; --serious: #995c33; --err: #8f1e2a; --ok-bg: #bcfee8; --warn-bg: #fff0b2; --serious-bg: #fff1e8; --err-bg: #ffc9bf; --btn-bg: #111110; --btn-text: #ffffff; --input-border: #8a8a82; --spinner-track: #e0e0dd; --spinner-head: #656562; --series-1: #276fa5; --series-2: #8d7803; --series-3: #009966; --series-4: #722460; --series-5: #8d3f24; } [data-theme="sepia"] { /* Sepia */ --bg: #f3ead7; --surface: #fbf5e7; --surface-alt: #eee2c9; --border: #e0d3b4; --border-strong: #cbb992; --text-primary: #3a3020; --text-secondary: #5e5039; --text-muted: #6a5e46; --text-hint: #71644b; --accent: #3a3020; --on-accent: #fbf5e7; --accent-bg: #e2dbcd; --focus-border: #3a3020; --border-control: #977e49; --ok: #087256; --warn: #746206; --serious: #915430; --err: #8b232d; --ok-bg: #bcfee8; --warn-bg: #fff0b2; --serious-bg: #fee3d0; --err-bg: #ffc9bf; --btn-bg: #3a3020; --btn-text: #fbf5e7; --input-border: #977e49; --spinner-track: #e0d3b4; --spinner-head: #6a5e46; --series-1: #0f63ae; --series-2: #937b27; --series-3: #247e51; --series-4: #87366f; --series-5: #7b3015; } [data-theme="auto"] { /* Auto, resolved LIGHT — the reader's system is in light mode. Every value is the Light block above; nothing new is defined here. */ --bg: #f5f5f3; --surface: #ffffff; --surface-alt: #f0f0ee; --border: #e0e0dd; --border-strong: #c8c8c4; --text-primary: #111110; --text-secondary: #555551; --text-muted: #656562; --text-hint: #6d6d6d; --accent: #266dc3; --on-accent: #ffffff; --accent-bg: #e9f0f9; --focus-border: #266dc3; --border-control: #8a8a82; --ok: #0b7a67; --warn: #7e6a07; --serious: #995c33; --err: #8f1e2a; --ok-bg: #bcfee8; --warn-bg: #fff0b2; --serious-bg: #fff1e8; --err-bg: #ffc9bf; --btn-bg: #111110; --btn-text: #ffffff; --input-border: #8a8a82; --spinner-track: #e0e0dd; --spinner-head: #656562; --series-1: #276fa5; --series-2: #8d7803; --series-3: #009966; --series-4: #722460; --series-5: #8d3f24; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { /* Auto, resolved MIDNIGHT — the family default, which is what "the dark one" means here. Same specificity as the block above and later in the file, so it wins; no !important needed. */ --bg: #0a0e1a; --surface: #121829; --surface-alt: #1b2238; --border: #262f4a; --border-strong: #374163; --text-primary: #e7eaf6; --text-secondary: #aab2d0; --text-muted: #838cab; --text-hint: #7f88a9; --accent: #818cf8; --on-accent: #0a0e1a; --accent-bg: #242b4a; --focus-border: #818cf8; --border-control: #5a6ba2; --ok: #72fe84; --warn: #efbe39; --serious: #f79b5c; --err: #fb7874; --ok-bg: #1e3635; --warn-bg: #322c1b; --serious-bg: #32241b; --err-bg: #321b1b; --btn-bg: #e7eaf6; --btn-text: #0a0e1a; --input-border: #5a6ba2; --spinner-track: #262f4a; --spinner-head: #7e87a8; --series-1: #999cea; --series-2: #ba8d12; --series-3: #54c693; --series-4: #cf5d9c; --series-5: #bd5a39; } } /* Explicit selection of midnight needs no block: with no matching [data-theme] the :root values above already apply. Apps should normalize removed saved theme ids before setting data-theme: "slate" -> "dark" (same palette, renamed), anything else unknown -> "auto". "auto" IS a valid saved id (see the block above) and must not be normalized away. THE DEFAULT IS "auto" (2026-08-22): a reader who has never touched the picker gets Light on a light system and Midnight on a dark one, so an app writes data-theme="auto" when it finds nothing saved — and writes it in the markup too, so the page is still right if the boot script never runs. Midnight stays the base palette in :root and stays what Auto means by "dark"; what changed is only which id an app reaches for when the reader has expressed no preference. */ /* ── The real RULES in this file (five, plus rule 7c's font-smoothing pair) ── Everything above is custom properties; these are declarations that take effect on their own, and they are here because every app needs them and no app should have to remember them. iOS Safari (and Chrome on Android) inflates the font of a block it judges to be a wide column of small text — "font boosting" — only in LANDSCAPE, only for some blocks, and never for the headings, tiles or table cells beside them. These are UI-dense screens whose body text sits in full-width cards, which is precisely the shape the heuristic fires on (it fired hardest while --fs-base was 13px, and a 16px base makes it less likely, not impossible): Financial Plan's card intros rendered two or three times the size of the figures they introduced while everything around them stayed put. `100%`, NOT `none`: `none` also disables the reader's own text scaling in some engines, which is an accessibility setting rather than a bug — the same distinction rule 8 draws for mobile Dynamic Type. WEB ONLY, like the type scale, and for the same reason: there is no such knob on Theme.kt / Theme.swift and there must not be one. Platform text scaling on mobile is the setting to respect, not to switch off. Every web app links this file as of 2026-08-18; if one ever inlines its tokens instead, it needs the same two lines in its own