/* ========================================================================== Gemial Digital v2 — Design tokens -------------------------------------------------------------------------- Custom properties only. No element is styled here, nothing is painted here, and declaring a property applies it to nothing — which is what lets this sheet load on every page on the site, including the twenty-odd Elementor pages, without changing one pixel. SCOPE. Everything hangs off html.gd2, not :root. REDESIGN-PLAN.md section 5: html.gd2 scores (0,1,1) against :root's (0,1,0), so v2 tokens win even if LiteSpeed's CSS Combine reorders the files and lands v1's tokens.css after this one. That is not theoretical — Combine reordering is why the v1 shell enqueues at priority 100. The v1 :root tokens keep working alongside these. Different names, different scope, no collision. v1's tokens.css is frozen and gets deleted at M6. COLOUR FUNCTIONS. Hex and rgb() only, never oklch(). A custom property is substituted at use time, so an unsupported colour function does not fall back to the previous declaration — it makes the CONSUMING declaration invalid at computed-value time, which falls back to *inherited*. On a near-black site that means invisible text with no recovery. color-mix() is fine and is already shipping in v1. Contrast figures are measured with the WCAG 2.1 relative-luminance formula, not estimated. See REDESIGN-PLAN.md section 3. ========================================================================== */ html.gd2 { /* ---- Surface ramp ------------------------------------------------- Near-black with a green undertone. A pure neutral black sits oddly beside lime — the accent reads as stuck on top rather than belonging. */ --ground: #070A08; /* page base */ --raised: #0D1210; /* cards, raised surfaces */ --raised-2: #151B18; /* nested surfaces */ /* Hairlines are DECORATIVE DIVIDERS ONLY. Neither clears 3:1, so they must never carry the edge of something interactive. */ --hairline: #1E2622; /* 1.28:1 on ground */ --hairline-hi: #2C3531; /* 1.57:1 on ground */ --border-int: #54605A; /* 3.03:1 — interactive UI boundaries */ /* ---- Text on dark -------------------------------------------------- */ --text-hi: #F4F7F5; /* 18.44:1 — headings */ --text: #C9D2CD; /* 12.86:1 — body */ --text-mid: #8E9A95; /* 6.82:1 — secondary */ /* 4.82:1 on ground AND 4.58:1 on raised. Pushed up from #68736E, which cleared ground but only reached 3.84:1 inside a card — and dim labels live inside cards more often than on the page base. */ --text-low: #767F7A; /* ---- Accent -------------------------------------------------------- The one rule that changes from v1: on near-black, lime measures 15:1. It is no longer accent-only and can carry real text. That is the single biggest thing the dark ground buys us. */ --lime: #ACF601; /* 15.09:1 — the accent */ --lime-bright: #C6FF47; /* 16.85:1 — hover */ --mint: #3DE1C0; /* 12.06:1 — data, live indicators */ --amber: #FFB84D; /* 11.57:1 — one warm moment, held back */ /* ---- Light variant ------------------------------------------------- Consumed by the shared shell on un-redesigned pages (M5). Declared here so both variants live in one file and the shell only ever reads role tokens, never a raw value. */ --paper: #F7F8F6; --paper-2: #ECEFEA; --ink: #0A0F0C; /* 18.14:1 on paper */ --ink-mid: #4E5854; /* 6.92:1 on paper */ /* Raw lime on paper is 1.24:1 — effectively invisible, exactly the trap CLAUDE.md section 5 warned about. On light grounds lime is permitted only as a block fill behind dark text, never as text itself. */ --lime-deep: #527300; /* 5.17:1 on paper */ /* ---- Type ---------------------------------------------------------- Faces are declared in v2/fonts.css. Trio A, approved 2026-08-13. system-ui sits behind each one so a failed font load degrades to something sane rather than to Times. */ --f-display: "Archivo", system-ui, -apple-system, sans-serif; --f-body: "Instrument Sans", system-ui, -apple-system, sans-serif; --f-mono: "Martian Mono", ui-monospace, SFMono-Regular, monospace; /* Archivo width axis. The display face is set wide and settles to normal on small screens from one file — the reason this family was chosen. */ --wide-hero: 112%; --wide-h2: 108%; --wide-brand: 105%; /* ---- Space and measure --------------------------------------------- */ --gutter: clamp(1.25rem, 4vw, 2.75rem); --container: 1280px; --sec-y: clamp(4rem, 9vw, 8.5rem); --header-h: 78px; --header-h-scrolled: 62px; /* ---- Radii --------------------------------------------------------- Tight, carried over from v1's reasoning: soft rounding reads friendly, this brand reads engineered. Borders do the structural work. */ --r-sm: 2px; --r-md: 3px; --r-pill: 99px; /* ---- Motion -------------------------------------------------------- One easing curve for the whole site. Scroll position is published as custom properties by v2/motion.js (M2) so scroll-linked effects stay a CSS problem and each one is independently killable. */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-fast: .18s; --dur: .35s; --dur-slow: .8s; --gd-scroll: 0px; /* pixels scrolled */ --gd-p: 0; /* 0-1 progress through the document */ /* ---- Shell roles --------------------------------------------------- The shared header and footer read ONLY these. Dark is the default; the light variant below remaps them for legacy pages. One code path, one markup tree, one token block that swaps — see REDESIGN-PLAN.md section 5. */ --shell-bg: var(--ground); --shell-bg-veil: color-mix(in srgb, var(--ground) 82%, transparent); --shell-surface: var(--raised); --shell-surface-2: var(--raised-2); --shell-text: var(--text-mid); --shell-text-hi: var(--text-hi); --shell-line: var(--hairline); --shell-line-hi: var(--hairline-hi); --shell-border-int: var(--border-int); --shell-accent: var(--lime); /* text-safe accent for this ground */ --shell-accent-hover: var(--lime-bright); --shell-btn-bg: var(--lime); /* lime as a block fill works on both */ --shell-btn-text: var(--ground); --shell-focus: var(--lime); } /* -------------------------------------------------------------------------- Light variant — un-redesigned pages -------------------------------------------------------------------------- Still nothing but custom properties. body.gd2-legacy is set by gemial_body_class() on every page that has NOT been rebuilt, so the shared header and footer flip to light and can sit above an Elementor body without looking broken. Set on body rather than html because the shell markup lives inside body and inherits from it, and because it keeps the html.gd2 block above as the single place a raw palette value is written. Note --shell-accent: lime is a block fill here, never text. The one token that changes meaning between variants, and the reason --lime-deep exists. -------------------------------------------------------------------------- */ body.gd2-legacy { --shell-bg: var(--paper); --shell-bg-veil: color-mix(in srgb, var(--paper) 88%, transparent); --shell-surface: var(--paper-2); --shell-surface-2: var(--paper); --shell-text: var(--ink-mid); --shell-text-hi: var(--ink); --shell-line: #DDE2DC; /* 1.23:1 on paper — decorative only */ --shell-line-hi: #C7CEC7; /* 1.51:1 on paper — decorative only */ /* 3.30:1 on paper AND 3.03:1 on paper-2. Chosen the same way --text-low was: the first candidate, #8B948E, measured 2.93:1 and missed outright. This value is pushed down until it clears 3:1 on BOTH light grounds, because an interactive boundary sits on a raised surface as often as on the page base. */ --shell-border-int: #828B85; --shell-accent: var(--lime-deep); --shell-accent-hover: #3E5800; /* 7.58:1 on paper */ --shell-btn-bg: var(--lime-deep); --shell-btn-text: var(--paper); --shell-focus: var(--lime-deep); }