/* =========================================================== UNAMIQ — design tokens (V12) THE SINGLE SOURCE OF TRUTH FOR EVERY COLOUR ON THE SITE. No other file contains a colour value. If you find one somewhere else, that is a bug. ───────────────────────────────────────────────────────── HOW THIS FILE IS ORGANISED — read this before editing Each theme has TWO sections: 1. SEEDS the handful of real brand colours. ►► THIS IS THE PART YOU EDIT ◄◄ 2. DERIVED everything else, written in terms of the seeds. You should almost never touch these: change a seed and they all follow. To restyle the whole site you change roughly six values. To change the brand accent you change TWO per theme. ───────────────────────────────────────────────────────── AFTER CHANGING ANY COLOUR, RUN THE CHECKER: python tools/check-contrast.py It reads this file, works out every text/background pair, and tells you which ones fall below the legal minimum. It takes about a second and it is the difference between "looks nice" and "readable by everyone". WHERE IS THE TYPE SCALE? In css/base.css, not here. Font sizes do not change between light and dark, and — more importantly — the home page does not load this file at all (it is permanently dark and defines its own palette). Putting sizes here would leave every one of them undefined on the home page. Rule of thumb: anything that varies by theme lives here. Anything that does not lives in base.css. Full explanation of every token: docs/style/design-tokens.md =========================================================== */ /* =========================================================== LIGHT THEME — "Instrument" (the default) =========================================================== */ :root{ /* ═══════════════════════════════════════════════════════ 1. SEEDS ►► EDIT HERE ◄◄ ═══════════════════════════════════════════════════════ */ /* The page itself. */ --seed-surface: #F2F4F7; --seed-surface-alt: #E6EAEF; /* Body text, and the ink that every grey is mixed from. Given as three numbers, not a hex code, so it can be used at any opacity below. */ --seed-text: #101820; --seed-ink: 16, 24, 32; /* The brand accent. --seed-accent is for GRAPHICS: rules, dots, borders, fills. It may be as vivid as you like. --seed-accent-ink is for TEXT. It must be dark enough to read on --seed-surface (4.5:1). A saturated orange cannot do both jobs, which is why there are two. Change them together. */ --seed-accent: 255, 107, 53; /* #FF6B35 */ --seed-accent-ink: #B23A06; /* 5.44:1 on the surface */ --seed-on-accent: #1A1B1D; /* text ON an --accent fill */ --seed-on-accent-ink:#ffffff; /* text ON an --accent-ink fill */ /* THE SECOND COLOUR — the field. Orange is the machine; this is what the machine measures. Reserved for crop, growth and field-data meaning. It is a SEMANTIC colour, not decoration: if it is not about the crop or the ground, it should not be green. --seed-signal graphics: marks, rules, dots --seed-signal-ink text set in it ►► CURRENTLY UNUSED. Held in reserve on purpose. ◄◄ The Vision/Mission/Purpose marks used to be drawn in it; they are the brand accent now. Nothing on the site shows crop or field data yet, and green used for anything else is exactly the decoration this token exists to prevent. It stays defined, checked and documented so it is ready the day there is real field data to mark. See docs/decisions/adr-0003-orange-and-green.md. */ --seed-signal: #3E8E3E; /* 3.71:1 — graphic use */ --seed-signal-ink: #24713D; /* 5.44:1 — safe as text */ /* Text sitting ON a photograph. Identical in both themes, because a photograph is not light or dark - it is whatever it is, and the scrim is what guarantees the text reads. */ --on-image: #ffffff; --image-scrim: rgba(0, 0, 0, .7); /* Status colours. Both are measured on --seed-surface-alt, not the page: the form status message sits inside the contact panel, which is --bg-alt. #15803D was 4.55:1 on the page but 4.15:1 there, and #C0392B cleared the line by 0.001. Same hues, a shade darker. */ --seed-success: #147839; /* 5.04 page / 4.60 panel */ --seed-error: #BE392B; /* 5.01 page / 4.56 panel */ /* Opacity of ink for each level of emphasis. These are not arbitrary — each is the lowest value that still meets the contrast minimum ON THE DARKEST SURFACE TEXT SITS ON, which is --seed-surface-alt, not --seed-surface. That distinction matters and it used to be wrong. The values were tuned against --seed-surface only, so text on a panel (a process card, the contact form panel — both --bg-alt) came out just under: --a-faint measured 4.54:1 on the page and 4.40:1 on a panel, and the checker never saw it because it only ever tested against the page background. It tests both surfaces now. Lower them and text stops being legible; the checker will tell you. */ --a-strong: .82; --a-muted: .62; --a-faint: .61; --a-decorative: .48; /* large decorative marks only */ --a-ui: .48; /* the edge of a real control */ --a-hairline: .12; /* purely decorative lines */ --a-nav: .65; --a-focus: .85; --a-grid: .05; --a-hover: .035; /* Two values the light theme cannot derive from ink. */ --seed-nav-fade: rgba(242, 244, 247, .92); --seed-shadow: rgba(16, 24, 32, .16); /* ═══════════════════════════════════════════════════════ 2. DERIVED — follows the seeds. Leave alone. ═══════════════════════════════════════════════════════ */ --bg-color: var(--seed-surface); --bg-alt: var(--seed-surface-alt); --text: var(--seed-text); --text-strong: rgba(var(--seed-ink), var(--a-strong)); --text-muted: rgba(var(--seed-ink), var(--a-muted)); --text-faint: rgba(var(--seed-ink), var(--a-faint)); --text-placeholder: rgba(var(--seed-ink), var(--a-faint)); --text-faintest: rgba(var(--seed-ink), var(--a-decorative)); --border-color: rgba(var(--seed-ink), var(--a-hairline)); --border-ui: rgba(var(--seed-ink), var(--a-ui)); --border-strong: rgba(var(--seed-ink), var(--a-ui)); --border-focus: rgba(var(--seed-ink), var(--a-focus)); --focus-ring: var(--seed-text); --focus-ring-offset: var(--seed-surface); --nav-link: rgba(var(--seed-ink), var(--a-nav)); --nav-current: var(--seed-text); --nav-fade: var(--seed-nav-fade); --tech-grid-line: rgba(var(--seed-ink), var(--a-grid)); --accent: rgb(var(--seed-accent)); --accent-rgb: var(--seed-accent); --accent-ink: var(--seed-accent-ink); --on-accent: var(--seed-on-accent); --on-accent-ink: var(--seed-on-accent-ink); --signal: var(--seed-signal); --signal-ink: var(--seed-signal-ink); --success: var(--seed-success); --error: var(--seed-error); --card-bg-hover: rgba(var(--seed-ink), var(--a-hover)); /* ── FRAMED MEDIA ────────────────────────────────────── One resting state and one hover state for every picture on the site. See "framed media" in components.css. Both the line and the shadow are accent-tinted rather than grey: the style guide's rule is that depth here is accent glow, never a grey drop shadow. At these opacities it reads as depth, not as colour. */ --media-border: rgba(var(--seed-accent), .20); --media-shadow: 0 2px 6px rgba(var(--seed-accent), .06), 0 0 14px rgba(var(--seed-accent), .05); --media-border-hover: var(--accent); --media-shadow-hover: var(--glow-soft); --media-scale: 1.03; --footer-border: rgba(var(--seed-ink), var(--a-hairline)); --footer-muted: rgba(var(--seed-ink), var(--a-faint)); --footer-meta: rgba(var(--seed-ink), var(--a-faint)); --footer-link: rgba(var(--seed-ink), var(--a-faint)); --footer-link-hover: var(--seed-text); --cta-border: rgba(var(--seed-ink), var(--a-ui)); --cta-color: var(--seed-text); --cta-hover-bg: var(--seed-text); --cta-hover-color: var(--seed-surface); --shadow-color: var(--seed-shadow); --glow-strong: 0 22px 46px rgba(var(--seed-accent), .28); --glow-soft: 0 0 26px rgba(var(--seed-accent), .16); } /* =========================================================== DARK THEME — "Ignition" Same structure, same token names. Only the seeds differ. The alphas are higher here because light text on a dark surface needs more opacity to reach the same contrast. =========================================================== */ html[data-theme="dark"]{ /* ═══════════════════════════════════════════════════════ 1. SEEDS ►► EDIT HERE ◄◄ ═══════════════════════════════════════════════════════ */ --seed-surface: #1A1B1D; --seed-surface-alt: rgba(255, 255, 255, .035); --seed-text: #F5F5F4; --seed-ink: 255, 255, 255; /* On this surface the vivid orange already reads as text, so accent and accent-ink are the same colour. That is the exception, not the rule — check before assuming it. */ --seed-accent: 255, 107, 53; /* #FF6B35, 6.08:1 here */ --seed-accent-ink: #FF6B35; --seed-on-accent: #1A1B1D; /* Because --accent-ink IS the vivid orange here, a fill made from it needs dark text, where the light theme's rust fill needs white. This is the one token that flips direction between the themes rather than just changing value. */ --seed-on-accent-ink:#1A1B1D; /* On a dark surface the green has to come up, not down. Reserved and unused — see the light theme's note above. */ --seed-signal: #7CB342; /* 6.88:1 */ --seed-signal-ink: #8FD14F; /* 9.36:1 */ --seed-success: #4ADE80; --seed-error: #E06A6A; /* Same rule as the light theme: measured against --bg-alt, which here is a 3.5% white wash over the surface, so slightly lighter than the page. --a-faint was .46 (4.60:1 on the page, 4.45:1 on a panel) and --a-decorative / --a-ui were .33 (3.01 / 2.98). */ --a-strong: .75; --a-muted: .58; --a-faint: .47; --a-decorative: .34; --a-ui: .34; --a-hairline: .12; --a-nav: .85; --a-focus: .90; --a-grid: .045; --a-hover: .025; --seed-nav-fade: rgba(0, 0, 0, .45); --seed-shadow: rgba(0, 0, 0, .45); /* ═══════════════════════════════════════════════════════ 2. DERIVED — a few that genuinely differ from light. Everything not listed here is inherited from :root and recomputes automatically from the seeds above. ═══════════════════════════════════════════════════════ */ --footer-link: rgba(var(--seed-ink), .60); --footer-link-hover: #ffffff; --nav-current: #ffffff; --cta-border: rgba(var(--seed-ink), .45); --cta-color: #ffffff; --cta-hover-bg: #ffffff; --cta-hover-color: var(--seed-surface); --glow-strong: 0 22px 46px rgba(var(--seed-accent), .32); --glow-soft: 0 0 26px rgba(var(--seed-accent), .2); /* A shadow does almost nothing on a near-black page, so on dark the resting line does the anchoring and carries a little more weight. The glow stays, barely, so the two themes still feel like the same treatment. */ --media-border: rgba(var(--seed-accent), .26); --media-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 0 14px rgba(var(--seed-accent), .06); } /* =========================================================== THEME SWITCH ANIMATION Applied only while the toggle is being used, so the very first paint is never animated. =========================================================== */ body.theme-transition, body.theme-transition *{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; } @media (prefers-reduced-motion: reduce){ body.theme-transition, body.theme-transition *{ transition:none !important; } }