/* ============================================================================= * assets/css/tokens.css — THE HOUSE PALETTE. One definition, every page. * * ── THE BUG THIS FILE EXISTS TO END ──────────────────────────────────────── * Every shared component on this site is written defensively, like this: * * color: var(--faint, rgba(245, 243, 238, .42)); * * …because assets/css/footer.css is loaded by three kinds of page and could * not assume the tokens were there. On the hand-written pages they WERE — * site.css defines them, including a full daylight set — so the footer went * dark-on-cream in bright and everything read correctly. * * On the home page it did not. That page is a React export and loads spa.css, * never site.css, so `--faint` was undefined and every fallback took over — * and every fallback is an OBSIDIAN value. In bright the home page's footer * was cream ink on a cream ground: the tagline, AAC SIGNIN, the copyright, the * language button, the theme control and both contact-form labels were all * invisible, at a contrast ratio of 1.02:1. /aac/ had a third set of numbers * again, from its own copy in aac.css. * * Three surfaces, three palettes, one design. That is not a styling mistake * that can be fixed by editing a rule — it is what happens when the same * design is defined in three places, and it comes back the next time a page is * added. So the palette moved HERE, this file is linked FIRST on every page, * and site.css / spa.css / aac.css keep only what is genuinely their own. * * ── WHAT "THEME-AWARE" MEANS HERE ────────────────────────────────────────── * Only TOKENS flip. Components state a role — "this is quiet text" — and the * role resolves differently in the two grounds. Nothing below this line in any * other stylesheet should carry a literal colour for text, a rule or a * surface; if it does, it will be wrong in one of the two themes, and it will * be wrong silently. * * ── THE INK IS PICKED AGAINST WCAG, NOT BY EYE ───────────────────────────── * A "quiet" grey chosen by eye on a near-black ground lands around 3:1 and * fails outright when the same alpha is applied to a light one. Every ink here * is stated with its measured contrast against its own ground, small-text AA * (4.5:1) being the floor for anything that is a word rather than a rule: * * obsidian ground #08080b bright ground #faf8f3 * --cream 17.9:1 --cream 16.2:1 body ink * --muted 7.2:1 --muted 6.6:1 secondary * --faint 4.6:1 --faint 4.7:1 quietest text * --gold 8.0:1 --gold 4.8:1 the house colour * * --faint was 38% on obsidian (3.3:1) and 46% on bright (2.9:1) — below the * floor in BOTH, which is why the footer read as decoration rather than as * text even on the pages whose palette was working. * ========================================================================== */ :root { /* ---- Ground --------------------------------------------------------- */ --obsidian: #08080b; --obsidian-lift: #0d0d12; --panel: #101017; --panel-2: #16161d; /* ---- Ink ------------------------------------------------------------ --white is the STRONGEST ink and --cream the body ink. The names are kept across both themes because the ROLE is what a component asks for; renaming them per theme would mean every rule choosing a theme, which is the thing tokens exist to prevent. */ --white: #ffffff; --cream: #f5f3ee; --muted: color-mix(in srgb, var(--cream) 62%, transparent); --faint: color-mix(in srgb, var(--cream) 48%, transparent); --line: color-mix(in srgb, var(--cream) 13%, transparent); --line-soft: color-mix(in srgb, var(--cream) 7%, transparent); /* A FIELD'S OWN WASH. Inputs were `rgba(255,255,255,.03)` — a white veil, which is a lift on near-black and a smudge on cream. Stated as a token so one rule serves both grounds. */ --field-wash: rgba(255, 255, 255, .03); --field-wash-focus: rgba(255, 255, 255, .05); --shadow-pop: 0 18px 44px -20px rgba(0, 0, 0, .8); /* ---- Gold — five stops, so a shine has somewhere to travel ---------- */ --gold: #d9b45a; --gold-lt: #f4e3a1; --gold-pale: #fff6d6; --gold-mid: #e6c266; --gold-deep: #a8842f; /* GOLD IN ITS THREE JOBS. The ramp above is a set of TONES; these say what the tone is FOR, and they are what components should ask for: --gold-hi the loudest gold ink — a hover, a live value --gold-edge gold as a hairline on the page ground --gold-wash gold as a translucent fill behind something Written out because `rgba(217, 180, 90, .45)` had been pasted into four stylesheets as a border and, being a literal, stayed pale gold on cream — an outline nobody could see around the one control a non-English visitor has to find first. */ --gold-hi: #fff6d6; --gold-edge: rgba(217, 180, 90, .45); --gold-edge-soft: rgba(217, 180, 90, .3); --gold-wash: rgba(217, 180, 90, .1); /* ---- The two motion hues ------------------------------------------- */ --cyan: #67e8f9; --cyan-deep: #1c545c; --pink: #f472b6; --pink-deep: #602a58; /* Status hues — chosen to separate by HUE for trichromats and by LIGHTNESS for everyone else. Every chip carries its word as well, so colour is never the only signal. */ --st-open: #8fa9c4; --st-active: #d9b45a; --st-block: #d98a6a; --st-review: #a58fd0; --st-done: #6fae8b; /* The two answer colours a form gives back. */ --ok: #9fdcbc; --bad: #ffb99e; /* ---- Type ----------------------------------------------------------- */ --brand: "Intrepid", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; /* Same face, but never swapped by the script-aware block below — for the few places that stay Latin in every language: the house signature. */ --brand-latin: "Intrepid", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; --display: var(--brand); --body: var(--brand); --luxe: .34em; --luxe-sm: .18em; /* ---- Measure + motion ------------------------------------------------ */ --gut: clamp(20px, 5vw, 64px); --maxw: 1320px; --dock-h: 0px; --r: 3px; --ease: cubic-bezier(.22, 1, .36, 1); /* THE ARTWORK SWITCH. The brand marks are white-on-transparent, one file for both themes, so daylight inverts them. Carried as a token rather than repeated per selector, because "which images invert" is a list that grows — and the footer wordmark is exactly the one that was missed, leaving the house signature invisible on every bright page. */ --mark-filter: none; color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════════════ BRIGHT — the same design in daylight. Only tokens are redefined; every component keeps one definition and follows. Three things genuinely invert rather than lighten: · the grounds and the ink swap roles, · the gold DARKENS — a colour tuned to glow on black is invisible on white, so the ramp runs the other way, · rules and dividers drop in opacity, because a dark hairline on white reads heavier than a light one on black at the same value. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="bright"] { /* Ground — warm, never clinical white */ --obsidian: #faf8f3; --obsidian-lift: #f2eee5; --panel: #ffffff; --panel-2: #f2eee5; --white: #0a0a0d; --cream: #1b1b21; --muted: rgba(27, 27, 33, .72); --faint: rgba(27, 27, 33, .62); --line: rgba(27, 27, 33, .16); --line-soft: rgba(27, 27, 33, .09); --field-wash: rgba(27, 27, 33, .035); --field-wash-focus: rgba(27, 27, 33, .06); --shadow-pop: 0 18px 44px -22px rgba(27, 27, 33, .28); /* Gold, carrying the same weight against a light ground. The ramp is REVERSED, not re-tinted: --gold-lt means "the emphasised one", which on cream is the deeper tone, and --gold-deep means "the quiet one", which here is the tone that was the house gold on black. Reading them as lightness values instead of as roles is what put a #a8842f hover on a #faf8f3 ground at 3.3:1. */ --gold: #8a6a1f; --gold-lt: #6d541a; --gold-mid: #96751f; --gold-deep: #d9b45a; /* NOT reversed: --gold-pale is used as a SURFACE (a solid button's hover fill, the light stop of the shine sweep), never as ink on the ground. */ --gold-pale: #fff6d6; /* On cream the loudest gold is the DEEPEST, and a hairline has to darken to be a hairline at all. */ --gold-hi: #5a4514; --gold-edge: rgba(138, 106, 31, .58); --gold-edge-soft: rgba(138, 106, 31, .34); --gold-wash: rgba(138, 106, 31, .09); --cyan: #0d6a76; --cyan-deep: #a7dfe6; --pink: #a3306f; --pink-deep: #f3c2dd; /* Re-picked, not reused: the pale ones (open, done) lose nearly all their contrast on a light ground, and a status colour nobody can read is worse than no colour. Hue order is preserved, so the states keep the same relationship to each other. */ --st-open: #3d6188; --st-active: #8a6a1f; --st-block: #a24f2c; --st-review: #5b46a0; --st-done: #2f7350; --ok: #1f6b47; --bad: #a8412a; --mark-filter: invert(1); color-scheme: light; } /* ═══════════════════════════════════════════════════════════════════════════ Script-aware type. Intrepid is a Latin display face and the luxe tracking is a Latin device. On Devanagari it visually splits conjuncts (घराना → घ र ा न ा); on Arabic it destroys the joins; and uppercase means nothing in either. src/i18n.js sets on every change, so both stand down for the scripts they were never designed for and a system face with the right glyphs takes over. ═══════════════════════════════════════════════════════════════════════════ */ :root:not([lang="en"]) { --brand: "Noto Sans", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif; --display: var(--brand); --body: var(--brand); --luxe: .06em; --luxe-sm: .03em; } /* ═══════════════════════════════════════════════════════════════════════════ THE HOUSE MARKS, in daylight. One rule, driven by --mark-filter, rather than a list of selectors per stylesheet — which is how the footer wordmark ended up as the one mark nobody inverted, and therefore invisible on every bright page while the header beside it was correct. `[data-art="bright"]` stands this down: theme.js swaps in a purpose-shot daylight variant when one exists beside the original, and an inverted photograph is not a daylight photograph. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="bright"] :is( .hdr__mark img, .logo-img img, .gate-brand img, .ftr__mark img, .ws__mark img, img[src*="/brand/wordmark"], img[src*="/brand/mark-"], img[src*="/brand/imgmark"], img[src*="/brand/lockup"] ):not([data-art="bright"]) { filter: var(--mark-filter); }