/* ============================================================ PALETTE — raw values. Only this file may reference these. ============================================================ */ :root { /* Chamber Purple */ --purple-deep: #3B0F7A; --purple-core: #5B21B6; --purple-mid: #7C3AED; --purple-light: #A78BFA; --purple-pale: #C4B5FD; --purple-wash: #EDE9FE; --purple-dusk: #251A45; /* dark-theme surface tint */ /* Assent Green */ --green-deep: #14532D; --green-core: #16A34A; --green-light: #4ADE80; --green-wash: #DCFCE7; --green-dusk: #0F2A1C; /* dark-theme surface tint */ /* Motion Orange */ --orange-deep: #9A3412; --orange-core: #EA580C; --orange-light: #FB923C; --orange-wash: #FFEDD5; --orange-dusk: #33190A; /* dark-theme surface tint */ /* Light neutrals */ --ink: #0F172A; --slate: #475569; --steel: #64748B; /* control boundaries — 1.4.11 needs 3:1 */ --mist: #E2E8F0; --paper: #F8FAFC; --white: #FFFFFF; /* Dark neutrals */ --night-base: #0A0F1E; --night-surface: #131A2C; --night-raised: #1C2438; --night-border: #2A3348; --night-steel: #7486A1; /* control boundaries — 1.4.11 needs 3:1 */ --night-text: #E2E8F0; /* not pure white — avoids halation */ --night-muted: #94A3B8; /* ---- Type ---- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --size-xs: 0.75rem; /* 12 */ --size-sm: 0.875rem; /* 14 */ --size-base: 1rem; /* 16 — floor for body text */ --size-lg: 1.25rem; /* 20 */ --size-xl: 1.5rem; /* 24 */ --size-2xl: 2rem; /* 32 */ --size-3xl: 2.5rem; /* 40 */ --size-4xl: 3.5rem; /* 56 */ --leading-display: 1.0; --leading-heading: 1.15; --leading-body: 1.6; --tracking-display: -0.03em; --tracking-heading: -0.02em; /* ---- Shape & motion ---- No radius tokens: the brand is square corners everywhere, and a token that exists gets reached for. The app icon's 24px radius is drawn in the icon asset, not here. */ --transition: 150ms ease; --measure: 70ch; --page-width: 68rem; /* one value shared by the header band's inner track and .page */ /* ---- Colour theme swatches ---- The one place a colour is drawn that the page is not itself painted in: the three previews in the Appearance control, which must all look like themselves whichever theme is active. Deliberately NOT restated by the palette blocks below, and named after the theme rather than after a role so nothing else is tempted to reach for them. */ --swatch-chamber-brand: #5B21B6; --swatch-chamber-accent: #EA580C; --swatch-parchment-brand: #6B21A8; --swatch-parchment-accent: #C2620A; --swatch-ledger-brand: #3A4275; --swatch-ledger-accent: #B65327; } /* ============================================================ COLOUR THEMES: the second appearance axis. Dark mode swaps which semantic aliases are in force. A colour theme swaps what the palette underneath them is, so the whole system (light block, both dark blocks, print, every ratio the aliases promise) is authored once and inherited by all three. `data-palette` sits on beside `data-theme`; the default theme, Chamber, is the :root palette above and declares no block of its own. The family names stay: each theme supplies its own hues for the brand family (--purple-*), the assent family (--green-*), the accent family (--orange-*) and the neutrals. Chamber Purple still dominates every one of them. A theme that read as green or orange overall would be wrong in the same way a screen would be. Rules for adding or editing a theme: - Restate EVERY colour token, not the ones that differ. A half-restated palette inherits Chamber's neutrals under its own brand, which is how a warm theme ends up with a cold page. tokens.test.ts fails on a missing one. - Every pair in that test's PAIRS table must clear AA in light and dark, for every theme. The ratio comments in the alias blocks below are Chamber's own figures and are asserted against Chamber only. - :root[data-palette=...] rather than [data-palette=...]: one specificity step above the :root palette, so the override holds wherever the block sits in the file. ============================================================ */ /* Parchment, the warm theme. Plum in place of violet, and warm grey paper in place of the cool slate, which is where most of the warmth is actually read: the neutrals are most of the pixels on any page a clerk works on. Amber carries urgency and moss carries assent. */ :root[data-palette="parchment"] { /* Chamber Purple, warm: plum */ --purple-deep: #3B0764; --purple-core: #6B21A8; --purple-mid: #9333EA; --purple-light: #C084FC; --purple-pale: #D8B4FE; --purple-wash: #F5EBFF; --purple-dusk: #2A1636; /* Assent Green, warm: moss */ --green-deep: #2C5518; --green-core: #4D9A2A; --green-light: #8FD65E; --green-wash: #E9F7DB; --green-dusk: #16240E; /* Motion Orange, warm: amber */ --orange-deep: #8A4A0B; --orange-core: #C2620A; --orange-light: #FBBF24; --orange-wash: #FEF0CE; --orange-dusk: #33200A; /* Light neutrals: warm grey on parchment */ --ink: #1C1917; --slate: #57534E; --steel: #79716B; --mist: #E7E5E4; --paper: #FAF8F5; --white: #FFFFFF; /* Dark neutrals: warm, so night pages are not a cold void */ --night-base: #14100D; --night-surface: #201A16; --night-raised: #2B241F; --night-border: #3A312A; --night-steel: #9C8F84; --night-text: #EDE7E1; --night-muted: #B0A69D; } /* Ledger, the restrained theme. The same three families at low chroma: indigo, sage, terracotta, on a near-neutral grey. For a clerk who wants the colour to stop talking and the words to carry the page. Urgency still has to cut through, so the accent is muted rather than faded out. */ :root[data-palette="ledger"] { /* Chamber Purple, restrained: indigo */ --purple-deep: #1E2547; --purple-core: #3A4275; --purple-mid: #59639C; --purple-light: #A7AFD6; --purple-pale: #C8CDE7; --purple-wash: #EEF0F7; --purple-dusk: #1B1F2E; /* Assent Green, restrained: sage */ --green-deep: #1E4634; --green-core: #2F7D5A; --green-light: #7FC6A4; --green-wash: #E4EFE9; --green-dusk: #11221B; /* Motion Orange, restrained: terracotta */ --orange-deep: #8A3B1E; --orange-core: #B65327; --orange-light: #E8A683; --orange-wash: #F7E9E1; --orange-dusk: #2B1810; /* Light neutrals: near-neutral grey */ --ink: #17191C; --slate: #4A4E55; --steel: #6B7078; --mist: #E3E5E8; --paper: #F6F7F8; --white: #FFFFFF; /* Dark neutrals */ --night-base: #0D0F12; --night-surface: #16181C; --night-raised: #1F2227; --night-border: #2C3037; --night-steel: #7B838E; --night-text: #E3E6E9; --night-muted: #9BA3AE; } /* ============================================================ LIGHT THEME — semantic aliases. Components use ONLY these. Filled buttons/badges use the deep tints: white on --green-core is 3.3:1 and on --orange-core 3.6:1 — both FAIL AA for button-size text. Core tints stay for borders, icons, and alert rules (3:1 UI threshold). ============================================================ */ :root, [data-theme="light"] { color-scheme: light; --brand: var(--purple-core); --brand-strong: var(--purple-deep); --brand-hover: var(--purple-deep); --brand-surface: var(--purple-wash); --brand-surface-text: var(--purple-deep); /* 11.5:1 on --brand-surface */ --brand-text: var(--purple-core); /* 9.0:1 on --surface */ --brand-fill: var(--purple-core); --brand-fill-text: var(--white); /* 9.0:1 on --brand-fill */ /* A full-bleed brand surface — the whole screen IS the brand, with nothing on it but the wordmark. Login, marketing heroes, email headers, splash screens, screensavers. The other surface aliases are backgrounds you read on; this one is the brand itself. Do not improvise this from --brand-strong: it is --purple-deep here but a light tint in dark mode, where white on it is 2.7:1. Nor from --brand-surface, a near-white wash in this theme. Those are the two ways to get a full-bleed background wrong, and both only fail in one theme. */ --brand-field: var(--purple-deep); --brand-field-hi: var(--purple-core); /* lighter end, for a gradient across the plate */ --brand-field-text: var(--white); /* 13.7:1 on --brand-field, 9.0:1 on -hi */ --brand-field-muted: var(--purple-pale); /* 7.4:1 on --brand-field, 4.9:1 on -hi */ /* The wordmark full stop and time-sensitive accents on the plate. Against --brand-field-hi it is 4.0:1 — the 3:1 large-text threshold, not the 4.5:1 body one — so it is display sizes only over the light end of a gradient. */ --brand-field-accent: var(--orange-light); /* 6.0:1 on --brand-field */ --text: var(--ink); --text-muted: var(--slate); /* For --brand and --brand-fill backgrounds only. NOT --brand-surface: pale in this theme, white on it is 1.2:1. Use --brand-surface-text there. NOT --brand-strong: a light tint in dark theme, white on it is 2.7:1. It is an emphasis foreground, not a background. */ --text-on-brand: var(--white); --surface: var(--white); --surface-sunken: var(--paper); --surface-raised: var(--white); /* --border is decorative only: card and table rules, where nothing depends on seeing it. At 1.2:1 it is far below the 3:1 that WCAG 2.2 SC 1.4.11 demands of anything that identifies a control, so the visible boundary of an input, select, checkbox or secondary button uses --border-strong. */ --border: var(--mist); --border-strong: var(--steel); /* 4.5:1 on --surface-sunken */ --success: var(--green-core); /* icons, borders, 4px alert rules */ --success-text: var(--green-deep); /* 8.3:1 on --success-surface */ --success-surface: var(--green-wash); --success-fill: var(--green-deep); --success-fill-text: var(--white); /* 9.1:1 on --success-fill */ --urgent: var(--orange-core); --urgent-text: var(--orange-deep); /* 6.4:1 on --urgent-surface */ --urgent-surface: var(--orange-wash); --urgent-fill: var(--orange-deep); --urgent-fill-text: var(--white); /* 7.3:1 on --urgent-fill */ /* The wordmark full stop. --wordmark-dot is 3.6:1 on --surface: large-text AA only, so it is valid at 24px and above (the display sizes the wordmark is drawn at). Below that — footers, running copy, email signatures — use --wordmark-dot-strong, which clears 4.5:1 at any size. */ --wordmark-dot: var(--orange-core); --wordmark-dot-strong: var(--orange-deep); /* 7.3:1 on --surface */ --focus-ring: var(--purple-mid); --elevation-card: 0 12px 32px rgb(91 33 182 / 0.08); --elevation-modal: 0 24px 64px rgb(15 23 42 / 0.12); /* Buttons only: pressing moves the control into its offset. Solid, not a blur, because blurs vanish on dark surfaces. */ --elevation-raised: 3px 3px 0 var(--brand-strong); } /* ============================================================ DARK THEME Brand colours supply the text; accent fills take dark text. ⚠ DUPLICATED THEME BLOCK. This media-query block and the [data-theme="dark"] block below MUST stay identical. Any change here must be made in both. (light-dark() would merge them, but its browser support is too new for our users.) ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --brand: var(--purple-mid); --brand-strong: var(--purple-light); /* Deepens on hover, as it does in light. Lightening it looks more natural on a dark UI but takes the white label with it: --purple-light under --text-on-brand is 2.7:1, and nothing between --purple-mid and --purple-light clears 4.5:1. */ --brand-hover: var(--purple-core); /* 9.0:1 under --text-on-brand */ --brand-surface: var(--purple-dusk); --brand-surface-text: var(--purple-pale); /* 8.7:1 on --brand-surface */ --brand-text: var(--purple-light); /* 6.4:1 on --surface */ --brand-fill: var(--purple-mid); --brand-fill-text: var(--white); /* 5.7:1 on --brand-fill */ /* Full-bleed brand surface. Deliberately NOT --night-base: that is the page a clerk reads on, and at L* 4.5 it is near-black. Stretched across a whole screen with only a wordmark on it, it reads as a void rather than as the brand. The dark plate is the dusk tint (L* 13.0) with the deep purple as its lighter end — still calm at 10pm, but recognisably Chamber Purple. */ --brand-field: var(--purple-dusk); --brand-field-hi: var(--purple-deep); --brand-field-text: var(--night-text); /* 13.0:1 on --brand-field, 11.1:1 on -hi */ --brand-field-muted: var(--night-muted); /* 6.2:1 on --brand-field, 5.3:1 on -hi */ --brand-field-accent: var(--orange-light); /* 7.1:1 on --brand-field, 6.0:1 on -hi */ --text: var(--night-text); --text-muted: var(--night-muted); --text-on-brand: var(--white); --surface: var(--night-surface); --surface-sunken: var(--night-base); --surface-raised: var(--night-raised); --border: var(--night-border); --border-strong: var(--night-steel); /* 4.2:1 on --surface-raised */ --success: var(--green-light); --success-text: var(--green-light); /* 8.8:1 on --success-surface */ --success-surface: var(--green-dusk); --success-fill: var(--green-light); --success-fill-text: var(--night-base); /* 11.0:1 on --success-fill */ --urgent: var(--orange-light); --urgent-text: var(--orange-light); /* 7.2:1 on --urgent-surface */ --urgent-surface: var(--orange-dusk); --urgent-fill: var(--orange-light); --urgent-fill-text: var(--night-base); /* 8.4:1 on --urgent-fill */ /* 7.7:1 on --surface — already AA at any size, so both aliases are the same colour here. The pair exists so components can name the small-size case without branching on theme. */ --wordmark-dot: var(--orange-light); --wordmark-dot-strong: var(--orange-light); --focus-ring: var(--purple-pale); /* Elevation is lightness, not shadow. */ --elevation-card: none; --elevation-modal: 0 24px 64px rgb(0 0 0 / 0.5); --elevation-raised: 3px 3px 0 var(--brand-strong); } } /* ⚠ DUPLICATED THEME BLOCK — keep identical to the media-query block above. Edit both or neither. */ [data-theme="dark"] { color-scheme: dark; --brand: var(--purple-mid); --brand-strong: var(--purple-light); --brand-hover: var(--purple-core); --brand-surface: var(--purple-dusk); --brand-surface-text: var(--purple-pale); --brand-text: var(--purple-light); --brand-fill: var(--purple-mid); --brand-fill-text: var(--white); --brand-field: var(--purple-dusk); --brand-field-hi: var(--purple-deep); --brand-field-text: var(--night-text); --brand-field-muted: var(--night-muted); --brand-field-accent: var(--orange-light); --text: var(--night-text); --text-muted: var(--night-muted); --text-on-brand: var(--white); --surface: var(--night-surface); --surface-sunken: var(--night-base); --surface-raised: var(--night-raised); --border: var(--night-border); --border-strong: var(--night-steel); --success: var(--green-light); --success-text: var(--green-light); --success-surface: var(--green-dusk); --success-fill: var(--green-light); --success-fill-text: var(--night-base); --urgent: var(--orange-light); --urgent-text: var(--orange-light); --urgent-surface: var(--orange-dusk); --urgent-fill: var(--orange-light); --urgent-fill-text: var(--night-base); --wordmark-dot: var(--orange-light); --wordmark-dot-strong: var(--orange-light); --focus-ring: var(--purple-pale); --elevation-card: none; --elevation-modal: 0 24px 64px rgb(0 0 0 / 0.5); --elevation-raised: 3px 3px 0 var(--brand-strong); } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } } /* ============================================================ PRINT — always light, no exceptions. Clerks print meeting packs. This is a COMPLETE alias reset: every themed token is pinned back to its light value so no dark value can leak onto paper. The selector list matches the specificity of both dark blocks — some browsers keep prefers-color-scheme: dark active in print, and the (0,3,0) media-query selector would otherwise beat a plain :root here. ============================================================ */ @media print { :root, :root[data-theme="dark"], :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: light; --brand: var(--purple-core); --brand-strong: var(--purple-deep); --brand-hover: var(--purple-deep); --brand-surface: var(--white); --brand-surface-text: var(--purple-deep); /* 13.7:1 on --brand-surface */ --brand-text: var(--purple-core); --brand-fill: var(--purple-core); --brand-fill-text: var(--white); /* A hero prints as paper. A full page of Chamber Purple is a cartridge of toner and a support ticket. */ --brand-field: var(--white); --brand-field-hi: var(--white); --brand-field-text: var(--ink); /* 17.9:1 on paper */ --brand-field-muted: var(--slate); /* 7.6:1 on paper */ --brand-field-accent: var(--orange-deep); /* 7.3:1 on paper */ --text: var(--ink); --text-muted: var(--slate); --text-on-brand: var(--white); --surface: var(--white); --surface-sunken: var(--white); --surface-raised: var(--white); --border: var(--mist); --border-strong: var(--steel); --success: var(--green-core); --success-text: var(--green-deep); --success-surface: var(--white); --success-fill: var(--green-deep); --success-fill-text: var(--white); --urgent: var(--orange-core); --urgent-text: var(--orange-deep); --urgent-surface: var(--white); --urgent-fill: var(--orange-deep); --urgent-fill-text: var(--white); --wordmark-dot: var(--orange-core); --wordmark-dot-strong: var(--orange-deep); --focus-ring: var(--purple-mid); --elevation-card: none; --elevation-modal: none; --elevation-raised: none; } }