/* ============================================================ WALTER LUTZ SERVICES LLC — DESIGN TOKENS Production mirror of the Walter Lutz Services design system. The design system and this file are one system in two places. Change a value in one, change it in both, then update docs/04-brand-guide.md. Mirrored 2026-08-20 from the design system's tokens/: colors, typography, spacing, radius, elevation, motion, imagery, fonts. NOT APPROVED. Gate 3 has not closed. Mirror of site/assets/css/tokens.css. Change it there first. Contrast ratios below were measured here, not copied. ============================================================ */ :root { /* ---- base ramp ---- Five values from the approved brand board, plus two derived golds. */ --ink-900: #111111; /* the brand's black */ --ink-700: #333333; /* body copy, secondary surfaces */ --ink-400: #6A6A6A; /* meta, hairline on dark, disabled */ --gold-500: #C08A1E; /* the accent */ --gold-700: #8B6313; /* the only gold safe as text on light */ --gold-100: #F6EDD9; /* accent wash */ --paper-100: #F5F5F5; --paper-000: #FFFFFF; /* ---- surfaces ---- */ --bg: var(--paper-000); --surface: var(--paper-100); --surface-2: #EBEBEB; --surface-inverse: var(--ink-900); --surface-inverse-2: var(--ink-700); --surface-accent: var(--gold-100); /* ---- text ---- Measured, not estimated: --text 18.88:1 on --bg --text-2 12.63:1 on --bg --text-3 3.36:1 on --bg. META AND CAPTIONS ONLY --text-accent 5.15:1 on --bg, 4.72:1 on --surface --text-accent-inverse 6.20:1 on --ink-900 --text-inverse-2 11.40:1 on --ink-900 */ --text: var(--ink-900); --text-2: var(--ink-700); --text-3: var(--ink-400); /* 4.54:1 or better on all four light surfaces */ --text-3-inverse: #8C8C8C; /* 5.62:1 on ink. Never use --text-3 on a dark ground */ --text-inverse: var(--paper-000); --text-inverse-2: #C9C9C9; --text-accent: var(--gold-700); --text-accent-inverse: var(--gold-500); /* ---- lines ---- */ --line: rgba(17,17,17,.12); --line-strong: rgba(17,17,17,.24); --line-inverse: rgba(255,255,255,.16); --line-accent: var(--gold-500); /* ---- brand and interactive ---- The gold asymmetry: gold-500 is a FILL on light and TEXT on ink. gold-700 is the reverse. Each fails in the other's place. The primary button is INK, not gold. */ --accent: var(--gold-500); --accent-hover: #A87716; --accent-active: var(--gold-700); --on-accent: var(--ink-900); /* 6.20:1. Never white on gold, which is 3.05:1 */ --primary: var(--ink-900); --primary-hover: #000000; --on-primary: var(--paper-000); /* ---- status ---- --positive 5.32:1 on --bg --negative 6.13:1 on --bg FLAGGED, see docs/07-decisions-log.md. The design system sets --caution to gold-500, which measures 3.05:1 on --bg and fails as text. It also makes a caution message and a call to action the same colour. --caution-text is the accessible variant to use for any caution text on a light ground until this is settled upstream. */ --positive: #1F7A4C; --negative: #B3341F; --caution: var(--gold-500); --caution-text: var(--gold-700); /* 5.15:1. Repo addition, pending upstream */ /* FLAGGED: the design system defines two near-identical names for different things. --focus-ring is a colour, in colors.css. --ring-focus is a box-shadow, in elevation.css. Mirrored verbatim rather than renamed, but they will get transposed by somebody. */ --focus-ring: var(--gold-500); /* ---- type ---- PENDING: the brand board recommends Plus Jakarta Sans in its typography panel and DM Sans in the palette strip. This follows the palette strip. --font-display is not only a heading choice: the Wordmark component composes the on-screen lockup from live display type, so changing it changes the mark on every page. Self-hosted as woff2 in assets/fonts/, declared in fonts.css. */ --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --fs-display: 64px; /* hero only */ --fs-h1: 48px; --fs-h2: 34px; --fs-h3: 24px; --fs-h4: 19px; --fs-body-lg: 19px; --fs-body: 17px; --fs-small: 15px; --fs-micro: 13px; --fs-eyebrow: 12px; --lh-display: 1.02; --lh-heading: 1.12; --lh-body: 1.6; --lh-tight: 1.35; --ls-display: -0.025em; --ls-h1: -0.02em; --ls-h2: -0.015em; --ls-h3: -0.01em; --ls-body: 0; --ls-caps: 0.14em; /* WALTER LUTZ style caps */ --ls-eyebrow: 0.22em; /* ELECTRICAL CONTRACTING style label */ --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heading: 700; --fw-display: 800; /* ---- spacing and layout ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --container: 1180px; --container-narrow: 720px; --gutter: 24px; --header-h: 96px; --tap-min: 44px; /* Repo additions. Not in the design system's token files, needed by content/pages/_global-chrome.md. Mirror upstream if adopted. */ --header-h-sm: 72px; --callbar-h: 60px; --section-y: var(--s-9); --section-y-mobile: var(--s-7); --bp-nav: 1020px; /* below this the nav becomes a drawer */ --bp-compact: 820px; /* below this grids and footer collapse */ /* ---- radii ---- Near-square. The mark is straight cuts and sharp diagonals. */ --r-none: 0px; --r-input: 2px; --r-button: 2px; --r-card: 2px; --r-media: 2px; --r-badge: 2px; --r-pill: 980px; /* phone-number chips only */ /* ---- elevation ---- Hairline first, shadow second. Neutral ink, never coloured. */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(17,17,17,.06); --shadow-md: 0 2px 8px rgba(17,17,17,.08); --shadow-lg: 0 16px 40px -16px rgba(17,17,17,.22); --shadow-inverse: 0 16px 40px -16px rgba(0,0,0,.6); --ring-focus: 0 0 0 3px rgba(192,138,30,.45); /* ---- imagery ---- Type never lands on un-scrimmed photography. The circuit texture is deliberately not a token: a relative url() in a custom property resolves against the consuming document and would 404. */ --scrim-hero: linear-gradient(90deg, rgba(17,17,17,.94) 0%, rgba(17,17,17,.82) 34%, rgba(17,17,17,.35) 62%, rgba(17,17,17,.12) 100%); --scrim-band: linear-gradient(180deg, rgba(17,17,17,.35) 0%, rgba(17,17,17,.88) 100%); --scrim-flat: rgba(17,17,17,.62); --scrim-edge: linear-gradient(90deg, rgba(17,17,17,1) 0%, rgba(17,17,17,0) 42%); --grade-photo: saturate(.86) contrast(1.06) brightness(.94); --grade-photo-dim: saturate(.72) contrast(1.04) brightness(.7); --watermark-opacity: .055; --ar-hero: 16 / 7; --ar-band: 4 / 3; --ar-card: 3 / 2; --ar-portrait: 4 / 5; /* ---- motion ---- transform and opacity only. No bounce, no spring, no parallax. */ /* Inline icons used from CSS rather than markup, so a regenerated page cannot drop them. Stroke colour comes from the element via mask. */ --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6 13l6 6 6-6'/%3E%3C/svg%3E"); --t-fast: .16s; --t-med: .28s; --t-slow: .45s; --ease-out: cubic-bezier(.2,.6,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }