/* ============================================================================ M3D CONCRETE, DESIGN TOKENS Every value here is a decision with a reason. Nothing inherited. GROUND: near-black. Not a style preference, measured. The 36 source photographs average RGB(122,123,118) at 50.2% value; a mid-value photo reads as a lit object on near-black and as a smudge on white. ACCENT: wet-cure green. The photo set's hues cluster in warm-earth 27-73deg and sky 168-233deg, leaving 90-165deg empty. Safety orange (the default of every concrete site in America) sits at 27-46deg and would camouflage against 14 of the 36 photographs. This accent cannot. ========================================================================= */ @layer tokens { :root { color-scheme: dark; /* --- ground ------------------------------------------------------- */ --ink-000: oklch(0.13 0.004 250); /* deepest wells, the drum interior */ --ink-050: oklch(0.17 0.005 250); /* page ground */ --ink-100: oklch(0.22 0.006 250); /* raised panels */ --ink-200: oklch(0.28 0.007 250); /* hairlines, dividers */ --ink-300: oklch(0.36 0.008 250); /* disabled, faint rules */ /* --- ink on ground ------------------------------------------------ */ --fog-500: oklch(0.58 0.006 250); /* tertiary on dark, decorative only */ --fog-550: oklch(0.63 0.006 250); /* tertiary on dark that carries TEXT (0.58 measured 4.48:1, just under) */ --fog-700: oklch(0.72 0.005 250); /* secondary body */ --fog-900: oklch(0.95 0.003 250); /* primary text */ --fog-max: oklch(0.93 0.003 250); /* DISPLAY type. Deliberately NOT white: at 132px on near-black, #fff blooms and the counters close. Measured references all sit at #E6E6E6 for exactly this. */ --fog-pure: oklch(0.98 0.002 250); /* reserved, rare, small text only */ /* --- the one light band ------------------------------------------- */ /* cured-concrete colour, sampled toward the set's own warm-neutral */ --bone-100: oklch(0.93 0.008 85); --bone-200: oklch(0.88 0.010 85); --bone-ink: oklch(0.22 0.010 85); --bone-mute: oklch(0.42 0.012 85); /* muted ON bone. A 58% mix of bone-ink measured 4.00:1, which fails AA. */ /* --- accent. one. 3-5 placements per viewport, hard cap ----------- */ --cure-500: oklch(0.82 0.20 155); --cure-600: oklch(0.72 0.19 155); --cure-dim: oklch(0.82 0.20 155 / 0.14); --cure-ink: oklch(0.18 0.03 155); /* text ON the accent */ /* --- material: the logo's own chrome, used only on the monogram ---- */ --chrome-hi: oklch(0.96 0.003 250); --chrome-mid: oklch(0.68 0.006 250); --chrome-lo: oklch(0.48 0.008 250); /* --- type --------------------------------------------------------- Archivo carries a real width axis (62-125). Display runs Expanded at 125 / 800; body runs Normal at 100 / 400. One family, two voices. Martian Mono is a WIDE mono - it reads as instrumentation, and it is the only uppercase on the site. Metric ships 78px / lh 1.2 / letter-spacing NORMAL on everything. That is the axis we beat them on. */ --font-display: 'Archivo', 'Archivo Expanded', system-ui, sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --font-mono: 'Martian Mono', ui-monospace, 'SF Mono', monospace; --wdth-display: 125; --wdth-body: 100; /* fluid scale, 360 -> 1920 */ --step-mono: clamp(0.625rem, 0.60rem + 0.12vw, 0.72rem); --step-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem); --step-body: clamp(1rem, 0.95rem + 0.24vw, 1.18rem); --step-lead: clamp(1.18rem, 1.08rem + 0.48vw, 1.5rem); --step-h3: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem); --step-h2: clamp(2.4rem, 1.7rem + 3.4vw, 5.2rem); --step-h1: clamp(2.15rem, 1.35rem + 3.7vw, 5.35rem); /* 86px @1920 */ /* negative leading at display size - Kononenko runs 0.70 at 109px. Metric sits at a safe 1.2 and looks safe. */ /* Leading TIGHTENS as size grows; tracking stays constant. Monolith runs 0.90 -> 0.70 -> 0.60 across its scale, ESR pins display at 0.95. One rule, applied consistently, is what reads as hand-set rather than fluid. */ --lh-display: 0.86; --lh-heading: 0.95; --lh-body: 1.6; --lh-mono: 1.4; --ls-display: -0.03em; --ls-heading: -0.02em; --ls-body: 0; --ls-mono: 0.09em; /* measured on every reference that uses a mono label */ /* --- spacing: 4px base, musical rather than linear ----------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; --s-12: 16rem; /* the side channel. Widened from a 4.5rem ceiling: at 1440 the copy used to stop 53px from the glass, which reads as a document rather than a composition. Now 72px at 1440 and 91px at 1920. */ --gutter: clamp(1.5rem, 0.9rem + 4vw, 7rem); --measure: 62ch; /* --- radius: varied by element. uniform radius reads as stamped ---- */ --r-input: 4px; --r-card: 10px; --r-modal: 16px; --r-pill: 999px; /* --- motion ------------------------------------------------------- Three of five instrumented award builds converge on an easeOutQuart family curve. Metric uses ZERO cubic-bezier - linear scrub and the browser default only. Carmowood runs ONE duration (0.8s) for every state change on the site, which is why it feels considered. */ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); /* longer tail than quart: the last 20% of the distance takes half the time, which is what makes an entrance read as settling rather than stopping */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --dur-base: 800ms; /* the site's one duration */ --dur-hover: 200ms; /* the only exception - exits ~75% of entrance */ --dur-exit: 600ms; /* --- the isometric grid, taken from the logo's own geometry -------- */ --iso-angle: 30deg; --z-nav: 100; --z-overlay: 200; } /* honour the user, always */ @media (prefers-reduced-motion: reduce) { :root { --dur-base: 1ms; --dur-hover: 1ms; --dur-exit: 1ms; } } }