/* ========================================================= SEMANTIC COLOUR TOKENS Maps the Paper/Leaf/Ochre palette (colours.css) onto the --color-* roles the components consume. Both themes are already resolved one layer down, so this file has no theme branches: change a role here and it changes in light and dark together. ========================================================= */ :root { /* ── Primary (viridian) ── No hover token: fills derive hover by leaning toward their own label colour (see IrisButton), which stays visible in every theme — a declared "lighter" step has nowhere to go on the dark paper fill. */ --color-primary: var(--viridian); /* The brand as a LINE, never as a fill: focus rings, control borders, selected edges, the tab bar. Leaf in light, sage in dark — never the fill colour, which is 1.18:1 against ink on paper and would read as body text. A border AROUND a solid primary fill is the fill itself (--color-primary), not this. */ --color-primary-edge: var(--viridian-edge); /* For primary used as TEXT on a light surface, where the brand itself is indistinguishable from ink. Fills and rules use --color-primary. */ --color-primary-accent: var(--viridian-accent); --color-on-primary: var(--viridian-ink); --color-primary-container: var(--viridian-soft); --color-on-primary-container: var(--ink); /* ── Secondary (ochre). --brass is already the AA-on-ground twin of the raw ochre (darkened in light, brightened in dark), so this role is safe as text, as an icon and as a border in both themes — the raw decorative ochre is never exposed here. Text on the CONTAINER is plain ink: a tint sits inside --color-on-surface's contrast zone by definition, and the palette has no ochre that clears AA on it. ── */ --color-secondary: var(--brass); --color-on-secondary: var(--brass-ink); --color-secondary-container: var(--brass-soft); --color-on-secondary-container: var(--ink); /* ── Tertiary (leaf) ── */ --color-tertiary: var(--leaf); --color-on-tertiary: var(--ink); --color-tertiary-container: var(--leaf-soft); --color-on-tertiary-container: var(--ink); /* ── Error (rust) ── Text and border split in dark: the border stays a mid rust so it holds 3:1 as a control boundary, the text lifts a step further for 8:1 body-copy duty. Ink on the well is plain ink — full contrast. */ --color-error: var(--rust-text); --color-on-error: var(--rust-on); --color-error-container: var(--rust-soft); --color-on-error-container: var(--rust-ink); /* ── Background & surface ── The container ramp is monotonic in both themes: it steps away from --surface (darker in light, lighter in dark), so a "higher" surface always reads as more separated, never as an inversion. */ --color-background: var(--ground); --color-on-background: var(--ink); --color-surface: var(--surface); --color-on-surface: var(--ink); --color-surface-dim: var(--surface-2); --color-surface-bright: var(--overlay); --color-surface-variant: var(--surface-2); --color-on-surface-variant: var(--ink-2); --color-surface-container-lowest: var(--overlay); --color-surface-container-low: var(--surface); --color-surface-container: var(--surface-2); --color-surface-container-high: var(--rule); --color-surface-container-highest: var(--rule-strong); /* ── Outline. --color-outline draws hairlines; --color-outline-variant is the muted-text role its 40-odd call sites actually use it for. ── */ --color-outline: var(--rule); --color-outline-strong: var(--rule-strong); --color-outline-variant: var(--muted); /* The structural rule under a tab strip: a plain hairline in light, the site's dark-band rule (--brand-800) in dark. */ --color-outline-brand: var(--rule-brand); /* ── Disabled ── The border dims below 3:1 on purpose — "not available" is allowed to whisper — but the text stays legible (5.7–5.8:1). */ --color-disabled: var(--ink-disabled); --color-field-outline-disabled: var(--field-border-disabled); /* ── Fields ── */ --color-field: var(--field-bg); --color-on-field: var(--field-ink); --color-field-outline: var(--field-border); /* ── Inverse ── */ --color-inverse-surface: var(--shell-bg); --color-inverse-on-surface: var(--shell-ink); /* Leaf is 3.09:1 on the shell and unreadable there; this is the lifted step the source system prescribes for green on a dark band. */ --color-inverse-primary: var(--leaf-on-dark); /* ── Utility ── */ --color-scrim: var(--scrim); --color-link: var(--link); /* ── Functional ── */ --color-focus-indicator: var(--leaf-bright); --color-selection-bg: var(--viridian-soft); --color-selection-fg: var(--ink); /* ── App chrome (nav bar, side menu). A SURFACE bar, brighter than the page in both themes — the design's .topbar and .apptabbar, not its dark studio shell. That is also what the components living in the bar (CollectionSwitcher, OfflineIndicator) already assume: they were painting --color-on-surface ink, unreadable on a dark bar. ── */ --color-nav-bg: var(--surface); --color-on-nav: var(--ink); --color-nav-muted: var(--ink-2); --color-nav-rule: var(--rule); /* Not the brand-as-text role: dark lifts this to brass so the active item is warm against the ink hover, not one more sage mark. */ --color-nav-accent: var(--nav-active); /* ── Status ── */ --color-ok-container: var(--leaf-soft); --color-on-ok-container: var(--ink); --color-ok-outline: var(--leaf); --color-warn-container: var(--brass-soft); --color-on-warn-container: var(--ink); --color-warn-outline: var(--brass); --color-error-outline: var(--rust); /* Pills are one recipe: hue-coded well, full-contrast ink, hue-coded edge clearing 3:1 against the page — so neutral's ink is plain ink and its edge borrows the field border, the one neutral with 3:1 duty. */ --color-neutral-container: var(--surface-2); --color-on-neutral-container: var(--ink); --color-neutral-outline: var(--field-border); }