/* ========================================================================== tokens.css — the single source of truth for every design value. Nothing else in this project should contain a raw hex colour, a font size, a spacing number, a radius, or a shadow. Change a value here and it propagates everywhere that token is used. DESIGN SYSTEM: "the ruled ledger". The visual grammar is borrowed from the artifact this business produces — a ruled ledger page. Rules appear where a ledger puts them (under a column head, between entries, doubled under a total), figures are tabular and column-aligned, and the brand gold is used as RULE AND MARK rather than as large-area fill. See NOTES.md §13. ========================================================================== */ :root { /* ---- Brand colour ---------------------------------------------------- */ --color-gold: #D9BC66; /* brand gold — rules, marks, small fills */ --color-gold-rgb: 217, 188, 102; /* same colour, for rgba() blends */ --color-gold-dark: #B29748; /* gold, one step down — borders, hovers */ /* Gold used as TEXT on a light surface must be darkened to clear WCAG AA. --color-gold-text : 5.76:1 on white, 4.81:1 on --color-surface (AA, body) --color-gold-display : 4.28:1 on white, 3.57:1 on --color-surface (AA, 24px+) See NOTES.md → "Gold text failed WCAG AA". */ --color-gold-text: #7B631E; --color-gold-display: #9B7E27; /* ---- Spruce — the structural second pole ----------------------------- Deep Colorado green. Carries the weight the gold used to carry as a large-area fill, so the gold can go back to being an accent. --color-spruce on --color-paper : 12.9:1 */ --color-spruce: #14342B; --color-spruce-rgb: 20, 52, 43; --color-spruce-deep: #0B211B; /* deepest ground — footer, dark bands */ --color-spruce-mid: #2F5449; /* hover / secondary rule on dark */ /* Muted spruce for column heads and secondary labels. 5.11:1 on --color-paper · 4.72:1 on --color-ledger — both clear AA at body sizes. An earlier #5A7A70 measured 4.33:1 and failed. */ --color-spruce-soft: #526E62; /* ---- Neutrals -------------------------------------------------------- */ --color-ink: #0D0D0D; /* primary heading + body ink */ --color-ink-rgb: 13, 13, 13; /* same colour, for rgba() scrims */ --color-black: #000000; --color-white: #FFFFFF; --color-muted: #575757; /* muted body copy */ --color-muted-warm: #89837B; /* process-step headings */ /* ---- Surfaces -------------------------------------------------------- */ --color-paper: #F7F5F1; /* the page ground — warm, near-white */ --color-surface: #EDEAE7; /* header bar, light sections */ --color-surface-alt: #E1DDD3; /* page hero band */ --color-surface-panel: #FFFFFF; /* cards on light sections */ --color-ledger: #E4EDEC; /* ledger-paper mint — panel surface */ --color-ledger-deep: #D3E1DE; /* ledger mint, one step down */ --color-surface-mint: var(--color-ledger); /* legacy alias */ /* ---- Semantic roles -------------------------------------------------- */ --color-primary: var(--color-gold); --color-text: var(--color-ink); --color-text-inverse: var(--color-white); --color-text-muted: var(--color-muted); --color-bg: var(--color-paper); --color-link: var(--color-spruce); --color-link-hover: var(--color-gold-text); --color-on-gold: var(--color-ink); /* 10.49:1 on --color-primary */ --color-on-gold-muted: #3F3527; /* 6.4:1 on --color-primary */ --color-on-spruce: #F2EFE9; /* 12.4:1 on --color-spruce */ --color-on-spruce-muted: #A9BDB6; /* 5.9:1 on --color-spruce */ --color-border: rgba(var(--color-ink-rgb), 0.12); --color-focus: #0B57D0; /* keyboard focus ring */ --color-error: #B3261E; /* form validation, 5.9:1 on white */ /* ---- Rules — the ledger's structural device -------------------------- Hairline between entries · gold under a column head · double under a total. Nothing else gets a rule. */ --color-rule: rgba(var(--color-spruce-rgb), 0.18); --color-rule-strong: rgba(var(--color-spruce-rgb), 0.42); --color-rule-invert: rgba(255, 255, 255, 0.16); /* ---- Type families --------------------------------------------------- */ --font-display: "Abhaya Libre", Georgia, "Times New Roman", serif; --font-heading: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --font-figure: "Inter Tight", "Helvetica Neue", Arial, sans-serif; /* ---- Type scale ------------------------------------------------------ */ --fs-3xs: 11px; --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-15: 15px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 22px; --fs-3xl: 26px; --fs-4xl: 30px; --fs-5xl: 36px; --fs-6xl: 44px; --fs-7xl: 52px; --fs-8xl: 60px; --fs-9xl: 72px; /* ---- Type roles ------------------------------------------------------ */ --fs-hero: var(--fs-9xl); /* h1, home hero */ --fs-page-title: var(--fs-6xl); /* h1/h2, section + page titles */ --fs-subtitle: var(--fs-4xl); /* secondary display heading */ --fs-step: var(--fs-5xl); /* process-step numerals */ --fs-card-title: var(--fs-xl); /* card + info-box titles */ --fs-lede: var(--fs-lg); /* lead paragraphs */ --fs-body: var(--fs-base); --fs-small: var(--fs-sm); --fs-eyebrow: var(--fs-3xs); /* uppercase section label */ --fs-button: var(--fs-2xs); --fs-counter: var(--fs-8xl); /* statement figures */ /* ---- Weights --------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Line heights ---------------------------------------------------- */ --lh-tight: 0.98; /* hero display */ --lh-display: 1.08; /* section titles */ --lh-heading: 1.3; /* card titles */ --lh-body: 1.65; /* body copy */ /* ---- Letter spacing -------------------------------------------------- Display type is set tight; utility caps are set wide. The gap between the two is what carries the typographic personality. */ --ls-display: -0.022em; --ls-tight: -0.011em; --ls-heading: -0.014em; --ls-wide: 0.02em; --ls-caps: 0.16em; /* micro-caps labels — the ledger column head */ --ls-counter: -0.03em; /* large display numerals */ /* ---- Spacing scale (px-named: what you type is what you get) --------- */ --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-15: 15px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-25: 25px; --space-30: 30px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-50: 50px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-112: 112px; --space-160: 160px; /* ---- Layout ---------------------------------------------------------- */ --container-max: 1240px; /* wide content shell */ --container-narrow: 1040px; /* text-column shell */ --measure: 68ch; /* longest comfortable line of body copy */ --column-max: 720px; /* reading column — font-independent, so a heading and its body share a left edge */ --gutter: var(--space-32); --section-py: var(--space-80); /* standard section rhythm */ --section-py-lg: var(--space-96); /* opening section of a page */ --header-bar-py: var(--space-24); --stack: var(--space-24); /* default gap between blocks */ /* ---- Radii ------------------------------------------------------------ The ledger is ruled, not rounded. Only genuinely circular things (dots, avatars) take a radius. */ --radius-round: 50%; /* ---- Shadows ---------------------------------------------------------- Used sparingly: this system separates things with rules, not depth. */ --shadow-card: 0 1px 2px rgba(var(--color-spruce-rgb), 0.04), 0 12px 32px -12px rgba(var(--color-spruce-rgb), 0.16); --shadow-raised: 0 18px 44px -18px rgba(var(--color-spruce-rgb), 0.32); /* ---- Borders + rules -------------------------------------------------- */ --border-width: 1px; --border-width-thick: 2px; --border-hairline: var(--border-width) solid var(--color-rule); --rule-head: var(--border-width-thick) solid var(--color-gold); --rule-total: 3px double var(--color-spruce); /* ---- Motion ---------------------------------------------------------- */ --transition-fast: 120ms ease; --transition-base: 220ms cubic-bezier(0.2, 0.6, 0.2, 1); /* ---- Focus ----------------------------------------------------------- */ --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ---- Z-index --------------------------------------------------------- */ --z-header: 100; --z-nav-overlay: 150; /* mobile full-page menu, above header content */ --z-nav-mast: 160; /* masthead while the mobile menu is open, so the close icon stays on top of the overlay below it */ --z-skip: 300; /* ---- Breakpoints ------------------------------------------------------ CSS cannot yet read a custom property inside a media query, so these four values are ALSO written literally in every @media rule. They are declared here as the documented source of truth: if you change one, search the CSS for the old px value and update the media queries too. They match the original site's Elementor breakpoints exactly. */ --bp-mobile: 767px; /* @media (max-width: 767px) */ --bp-tablet: 1024px; /* @media (min-width: 768px) and (max-width: 1024px) */ --bp-laptop: 1366px; /* @media (min-width: 1025px) and (max-width: 1366px) */ --bp-desktop: 1367px; /* @media (min-width: 1367px) */ }