/* ============================================================ TOKENS Raw palette, then semantic aliases. Components only ever reference the semantic layer, which is why .forest can flip an entire section's ground by reassigning nine variables. PALETTE LOGIC Deep green is the surface (a British Racing Green ground, not an accent), amber is the one accent, kept scarce. Beige is the paper. Peach is amber's quiet cousin: used constantly as the dim/secondary tone on the green ground, never as a highlight, which is what keeps amber the only true accent. Amber inverts by ground: pure #FFB000 only reads against the dark green (beige and amber are close enough in lightness that pure amber nearly disappears on paper), so paper uses a deepened amber for both text and graphics, and green uses the pure hue for both. Every value below is measured against its own ground. ============================================================ */ :root { /* --- raw: paper ground ------------------------------------ */ --c-paper: #F5F5DC; /* beige */ --c-paper-raise: #ECE8D0; --c-paper-rule: #DCD5B8; --c-paper-rule-hi: #C7BE9C; --c-ink: #1A1812; /* warm near-black ink */ --c-ink-dim: #5C5645; /* 6.6:1 */ --c-ink-faint: #A39C87; /* ornament and outlines only */ --c-amber-deep: #8F5A08; /* 5.2:1, amber deepened for paper: pure amber reads too close in lightness to beige to serve as text */ /* --- raw: forest green ground ------------------------------ */ --c-forest: #123524; /* deep forest green */ --c-forest-raise: #1D452D; --c-forest-rule: #314E3A; --c-forest-rule-hi: #40664F; --c-cream: #F5F5DC; /* 10.5:1, same beige, reversed out */ --c-peach: #FFCF9D; /* 8.1:1, dim/secondary text, ornament */ --c-sage: #4F7A5E; /* ornament and outlines only */ --c-amber: #FFB000; /* 6.3:1, pure amber, text and graphics */ /* --- semantic (paper is the default ground) --------------- */ --bg: var(--c-paper); --bg-raise: var(--c-paper-raise); --rule: var(--c-paper-rule); --rule-hi: var(--c-paper-rule-hi); --ink: var(--c-ink); --ink-dim: var(--c-ink-dim); --ink-faint: var(--c-ink-faint); --accent: var(--c-amber-deep); --accent-graphic: var(--c-amber-deep); --on-accent: var(--c-cream); /* text drawn on a filled --accent chip */ /* --- type ------------------------------------------------- */ --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scoped to the homepage name treatment only, so the rest of the system keeps the original two-face pairing. Campeno (the font actually requested) is a paid Craft Supply Co. release, not on Google Fonts; Space Grotesk stands in until real license files exist to self-host. See index.html for the swap note. */ --font-name: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; /* Archivo width-axis instances, driven via font-stretch */ --w-numeral: 72%; --w-display: 86%; --w-title: 90%; --w-subtitle: 95%; --w-text: 100%; --t-numeral: clamp(5.5rem, 16vw, 14rem); --t-name: clamp(2.75rem, 7vw, 5.5rem); --t-strip-val: clamp(1.2rem, 2.2vw, 1.5rem); --t-h2: clamp(1.75rem, 3.5vw, 2.75rem); --t-h3: clamp(1.5rem, 2.6vw, 2.125rem); --t-lead: 1.25rem; --t-body: 1.0625rem; --t-meta: 0.75rem; /* mono metadata */ --t-micro: 0.6875rem; /* mono spec labels */ --track-tight: -0.035em; --track-snug: -0.02em; --track-mono: 0.09em; --track-micro: 0.12em; /* --- space: 4px base, deliberately sparse ----------------- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 6rem; /* 96 */ --s-10: 8rem; /* 128 */ --s-11: 11rem; /* 176 */ /* --- layout ----------------------------------------------- */ --shell: 1240px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --bleed: clamp(0.75rem, 2vw, 1.5rem); /* always < --gutter */ --section-y: clamp(6rem, 12vw, 11rem); --header-h: 60px; --measure: 62ch; --label-col: 210px; /* --- motion: heavy decelerate, zero overshoot ------------- */ --dur-fast: 120ms; --dur: 160ms; --dur-slow: 200ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------------------------ Forest green ground. Reassigns the semantic layer only, so every component inherits it with no per-component dark rules. ------------------------------------------------------------ */ .forest { --bg: var(--c-forest); --bg-raise: var(--c-forest-raise); --rule: var(--c-forest-rule); --rule-hi: var(--c-forest-rule-hi); --ink: var(--c-cream); --ink-dim: var(--c-peach); --ink-faint: var(--c-sage); --accent: var(--c-amber); --accent-graphic: var(--c-amber); --on-accent: var(--c-ink); background-color: var(--bg); color: var(--ink); }