/* ============================================================================= ITCSS LAYER 1 — SETTINGS Design tokens only. No selectors, no output — just custom properties. This file must load FIRST, before every other layer. --------------------------------------------------------------------------- WHY THIS FILE EXISTS (read this before editing a colour anywhere else) --------------------------------------------------------------------------- A 2026-07-23 codebase audit found THREE separate `:root` blocks scattered across the old single-file stylesheet, built up across different eras of this project (`--clr-*`, then later `--space-*`/semantic tokens, then later still a whole parallel `--ihx-*` system). A script comparing every declared value found 77 total property declarations resolving to only 54 TRULY UNIQUE values — meaning ~30% of all design tokens were pure redundant duplicates under different names. The worst case: the single colour #0D1B2A had SIX different variable names pointing at it (`--clr-ink`, `--clr-maroon`, `--clr-navy`, `--clr-slate`, `--ihx-ink`, `--ihx-navy`) — meaning a developer could change ONE of those six thinking it updates "the ink colour everywhere," and four other components using a different alias would silently stay the old colour. That kind of silent drift between parallel token systems is a real, concrete explanation for "the codebase feels fragile." THE FIX: this file defines each unique value exactly ONCE, under one clear canonical name (the --color-*/--space-*/--radius-*/--shadow-* scales below). Every one of the old names (--clr-*, --ihx-*, etc.) still works EXACTLY as before — they're aliased to the new canonical tokens further down this file — so nothing in the existing ~6,500 lines of component CSS had to change to adopt this. Zero visual risk, one real source of truth from now on. New CSS should use the canonical names directly; the aliases exist for backward compatibility with existing rules, not as the preferred way to write new ones. ============================================================================= */ :root { /* ---- Brand colours (canonical) ------------------------------------- */ --color-ink: #0D1B2A; /* absorbed: clr-ink, clr-maroon, clr-navy, clr-slate, ihx-ink, ihx-navy — all 6 were this exact value */ --color-navy-deep: #1A3550; /* absorbed: clr-maroon-dark, ihx-navy-2 — note: this is a dark NAVY, not maroon; "clr-maroon-dark" was a misleading legacy name kept only as an alias below */ --color-terracotta: #800020; /* absorbed: clr-terracotta, accent-revision, ihx-terracotta */ --color-terracotta-dark:#5C0019; /* was: clr-terracotta-dk */ --color-terracotta-alt: #9C0028; /* was: ihx-terracotta-2 */ --color-saffron: #9E2A2B; /* absorbed: clr-saffron, ihx-saffron */ --color-emerald: #166534; /* was: clr-emerald */ --color-emerald-dark: #14532D; /* was: clr-emerald-dark */ --color-gold: #C5A059; /* absorbed: clr-gold, accent-bundle, ihx-gold */ --color-gold-dark: #8C6A3E; /* absorbed: clr-gold-dark, ihx-gold-deep */ --color-gold-star: #D4AF37; /* was: clr-gold-star */ --color-premium: #7C2D12; /* was: accent-premium */ /* ---- Neutrals / surfaces -------------------------------------------- */ --color-white: #FFFFFF; /* absorbed: clr-white, ihx-cream (that legacy name was misleading — the value is plain white, not cream) */ --color-cream: #FAF7F0; /* absorbed: clr-cream, clr-cream-2, ihx-surface */ --color-parchment: #F4EDE1; /* was: ihx-parchment — genuinely distinct from cream, kept separate */ --color-surface-2: #F8F4ED; /* was: ihx-surface-2 */ --color-body: #475569; /* absorbed: clr-body, ihx-body */ --color-muted: #64748B; /* was: clr-muted */ --color-muted-warm: #6B6157; /* was: ihx-muted — a distinct warmer grey, kept separate from --color-muted */ --color-border: #E2E8F0; /* was: clr-border */ --color-line: rgba(197,160,89,.45); /* was: ihx-line */ /* ---- Semantic / alert palette ---------------------------------------- */ --color-info-bg: #EFF6FF; --color-info-border: #BFDBFE; --color-info-text: #1E40AF; --color-success-bg: #ECFDF5; --color-success-border: #A7F3D0; --color-success-text: var(--color-emerald); --color-warn-bg: #FFFBEB; --color-warn-border: #FDE68A; --color-warn-text: #92400E; /* ---- Spacing scale (canonical) --------------------------------------- Two historical scales existed (--space-* and --ihx-s*). Where their values matched exactly they're merged below; --ihx-s4/s5 did NOT exactly match --space-lg/xl (22px vs 24px, 32px vs 40px) so both are kept as genuinely distinct steps rather than force-merged — that numeric difference may be intentional in whichever components use it, and collapsing two non-identical values into one is exactly the kind of silent behaviour change this consolidation is trying to AVOID. */ --space-xs: 6px; /* absorbed: space-xs, ihx-s1 (exact match) */ --space-sm: 10px; /* absorbed: space-sm, ihx-s2 (exact match) */ --space-md: 16px; /* absorbed: space-md, ihx-s3 (exact match) */ --space-lg: 24px; /* was: space-lg */ --space-xl: 40px; /* was: space-xl */ --space-ihx-4: 22px; /* was: ihx-s4 — NOT the same as --space-lg (24px), kept distinct on purpose */ --space-ihx-5: 32px; /* was: ihx-s5 — NOT the same as --space-xl (40px), kept distinct on purpose */ /* ---- Radii (canonical) ------------------------------------------------ */ --radius-sm: 6px; /* was: radius-sm (coincidentally same number as --space-xs, but this is a RADIUS — deliberately NOT merged with the spacing token, different concept) */ --radius-md: 10px; /* was: radius-md (coincidentally same number as --space-sm — same reasoning, kept separate) */ --radius-lg: 18px; /* was: radius-lg */ --radius-ihx: 16px; /* was: ihx-r — close to but distinct from --radius-lg (18px), kept as its own token rather than assumed equivalent */ --radius-ihx-sm: 10px; /* was: ihx-r-sm */ --radius-ihx-pill: 999px; /* was: ihx-r-pill */ /* ---- Shadows ----------------------------------------------------------- */ --shadow-card: 0 4px 14px rgba(15,23,42,0.07); /* was: shadow-card */ --shadow-lift: 0 14px 34px rgba(15,23,42,0.14); /* was: shadow-lift */ --shadow-ihx: 0 6px 20px rgba(15,23,42,.06); /* was: ihx-shadow */ --shadow-ihx-lg: 0 12px 32px rgba(15,23,42,.10); /* was: ihx-shadow-lg */ --shadow-glow-gold: 0 0 0 1px rgba(197,160,89,0.30), 0 8px 30px rgba(197,160,89,0.18); /* was: glow-gold */ --shadow-premium: 0 10px 40px rgba(31,41,55,0.10); /* was: premium-shadow */ /* ---- Motion -------------------------------------------------------------- */ --transition-base: 0.25s ease; /* was: transition */ /* ---- Section rhythm -------------------------------------------------- */ --section-padding: 30px; /* was: sec-pad */ --section-padding-m: 20px; /* was: sec-pad-m */ /* ---- Layout widths — every section aligns to one of these two ---------- */ --width-wide: 1100px; /* was: ih-wide — grids, hero, nav, homepage product tiles */ --width-read: 760px; /* was: ih-read — text, chapter list, sample, buy box, FAQ, module pages */ /* ---- Fluid type -------------------------------------------------------- */ --type-eyebrow: .7rem; /* was: ihx-t-eyebrow */ --type-body: .92rem; /* was: ihx-t-body */ --type-title: clamp(1.15rem, 3.6vw, 1.42rem); /* was: ihx-t-title */ --type-price: clamp(1.35rem, 4.4vw, 1.6rem); /* was: ihx-t-price */ /* =========================================================================== BACKWARD-COMPATIBLE ALIASES Every variable name used anywhere in the existing component CSS still works exactly as before — pointed here at the new canonical token. This section can shrink over time as component CSS is gradually migrated to reference the canonical names directly (not urgent, no functional need to rush it), but do not delete an alias while anything still uses it — grep for the old name first. =========================================================================== */ /* legacy --clr-* names */ --clr-ink: var(--color-ink); --clr-maroon: var(--color-ink); --clr-maroon-dark: var(--color-navy-deep); --clr-navy: var(--color-ink); --clr-slate: var(--color-ink); --clr-saffron: var(--color-saffron); --clr-terracotta: var(--color-terracotta); --clr-terracotta-dk: var(--color-terracotta-dark); --clr-emerald: var(--color-emerald); --clr-emerald-dark: var(--color-emerald-dark); --clr-gold: var(--color-gold); --clr-gold-dark: var(--color-gold-dark); --clr-gold-star: var(--color-gold-star); --clr-cream: var(--color-cream); --clr-cream-2: var(--color-cream); --clr-white: var(--color-white); --clr-body: var(--color-body); --clr-muted: var(--color-muted); --clr-border: var(--color-border); /* legacy --radius-*/--shadow-*/--transition/--sec-pad names */ --radius-sm-legacy: var(--radius-sm); /* kept for clarity only; --radius-sm itself is unchanged */ --shadow-card-legacy: var(--shadow-card); --transition: var(--transition-base); --sec-pad: var(--section-padding); --sec-pad-m: var(--section-padding-m); --glow-gold: var(--shadow-glow-gold); --premium-shadow: var(--shadow-premium); /* legacy --space-* names */ --space-xs-legacy: var(--space-xs); --space-sm-legacy: var(--space-sm); --space-md-legacy: var(--space-md); --space-lg-legacy: var(--space-lg); --space-xl-legacy: var(--space-xl); /* legacy product-accent names */ --accent-revision: var(--color-terracotta); --accent-premium: var(--color-premium); --accent-bundle: var(--color-gold); /* legacy semantic alert names */ --info-bg: var(--color-info-bg); --info-bd: var(--color-info-border); --info-tx: var(--color-info-text); --success-bg: var(--color-success-bg); --success-bd: var(--color-success-border); --success-tx: var(--color-success-text); --warn-bg: var(--color-warn-bg); --warn-bd: var(--color-warn-border); --warn-tx: var(--color-warn-text); /* legacy --ihx-* names */ --ihx-parchment: var(--color-parchment); --ihx-surface: var(--color-cream); --ihx-surface-2: var(--color-surface-2); --ihx-ink: var(--color-ink); --ihx-body: var(--color-body); --ihx-muted: var(--color-muted-warm); --ihx-terracotta: var(--color-terracotta); --ihx-saffron: var(--color-saffron); --ihx-terracotta-2: var(--color-terracotta-alt); --ihx-cream: var(--color-white); --ihx-gold: var(--color-gold); --ihx-gold-deep: var(--color-gold-dark); --ihx-navy: var(--color-ink); --ihx-navy-2: var(--color-navy-deep); --ihx-line: var(--color-line); --ih-wide: var(--width-wide); --ih-read: var(--width-read); --ihx-r: var(--radius-ihx); --ihx-r-sm: var(--radius-ihx-sm); --ihx-r-pill: var(--radius-ihx-pill); --ihx-shadow: var(--shadow-ihx); --ihx-shadow-lg: var(--shadow-ihx-lg); --ihx-s1: var(--space-xs); --ihx-s2: var(--space-sm); --ihx-s3: var(--space-md); --ihx-s4: var(--space-ihx-4); --ihx-s5: var(--space-ihx-5); --ihx-t-eyebrow: var(--type-eyebrow); --ihx-t-body: var(--type-body); --ihx-t-title: var(--type-title); --ihx-t-price: var(--type-price); }