/* ========================================================================== Heaven Furniture Mart — Design tokens Palette: "Signal" — blue-black, paper white, one red. Replaces "Oxblood & Bone" (#170000 / #F54F07 / lime AR signal). THE PAGE IS LIGHT NOW. The old skin was dark-first with .section-light as the exception; this one is paper-first with .section-dark as the exception. Token names stay semantically honest through the flip: --ink and its steps are still genuinely dark, --on-dark is still text-for-a-dark-surface. What changed is which of them the body defaults to (see base.css). ========================================================================== */ :root { /* ---- Dark surfaces --------------------------------------------------- Used by the hero, the meta strip, the corridor and the footer. Not the page base any more. */ --ink: #111219; /* deepest — hero, corridor, page-dark base */ --ink-2: #1A1A1A; /* footer, raised surfaces on dark */ --ink-3: #252525; /* footer sub-bar, hover surfaces on dark */ /* ---- Light surfaces --------------------------------------------------- */ --paper: #FFFFFF; /* page base */ --paper-2: #FDFDFD; /* alternating band — a half-step, not a card */ --ghost: #E9E9E9; /* giant background type AND the fluid-fill base */ /* ---- Structure on light --------------------------------------------- --hair is 1.44:1 on white: correct for a decorative divider, and NOT enough for anything interactive. WCAG 1.4.11 wants 3:1 on the boundary of a control, so form fields and chips use --hair-strong (3.23:1). */ --hair: #D7D7D7; --hair-strong: #8F8F8F; /* ---- Signal: three steps of one red, split by contrast ----------------- #ED1C2E is 4.37:1 on white and 4.33:1 on --ink — it clears the 3:1 bar for large text and UI components but FAILS 4.5:1 for body copy. #D41929 is 5.29:1 on white, and white on it is also 5.29:1. So: bright red for fills, large display, arrows, dots and rules; deep red for small red text and for any fill carrying white text. --primary-lite exists because the deep/bright split was calibrated for red on PAPER, and going darker is the wrong move on ink: small red text on a dark band needs a LIGHTER red, not a deeper one. Measured on --ink, #ED1C2E is 4.28:1 (fails) and #D41929 is worse; #EC4B53 is 5.04:1 and passes. It is in the reference's own palette, so this is a third step of the same red rather than a new hue. Use it for small red text on dark — search-result highlights, flags, eyebrows inside .section-dark. */ --primary: #ED1C2E; --primary-deep: #D41929; --primary-lite: #EC4B53; --primary-ink: #FFFFFF; /* text on a --primary-deep fill: 5.29:1 */ /* ---- AR --------------------------------------------------------------- The AR colour law is RETIRED. The old skin reserved lime #C6F24E for AR affordances and nothing else, which made the brightest pixel on the site always the invitation to place furniture in your room. AR now shares the signal red, so it earns attention through the viewfinder brackets, size and placement instead of hue. Aliases kept so all 15 call sites across base/pages/experience resolve without edits. Split three ways rather than two, because the AR button is the one place where fill and outline have different contrast jobs: --ar-signal the fill. -deep, because it carries a white 17px label and 17px/800 is under WCAG's large-text threshold. --ar-signal-dp the hover fill. DARKER, not brighter — brightening to #ED1C2E would drop the white label to 4.37:1 and fail. --ar-bracket the viewfinder brackets. Bright, so the loudest part of the AR affordance is its silhouette. This is what carries the old lime's job now that hue can't. */ --ar-signal: var(--primary-deep); --ar-signal-dp: #B01521; /* white on it: 7.06:1 */ --ar-bracket: var(--primary); /* ---- Text roles ------------------------------------------------------- */ --on-dark: #FFFFFF; --on-dark-mute: #A4888B; /* 5.83:1 on --ink, 5.36:1 on --ink-2 */ --on-light: #191919; --on-light-mute: #686868; /* 5.57:1 on paper */ --on-light-fade: #535353; /* 7.69:1 — captions, meta */ /* ---- Legacy alias ----------------------------------------------------- Phase 1 kept five aliases so 65+ existing declarations across four stylesheets would keep resolving without a search-replace (which is how a re-skin turns into a rewrite). Phase 4 migrated every one of those call sites to the honest role names, so four of the five — --bone, --bone-2, --clay and --brass — are now referenced by NOTHING and have been deleted. Verified by sweeping `var(--X)` across css/, js/ and all 33 HTML files including inline styles. They are removed rather than left behind with a note, for the same reason initMenu() was removed from js/shell.js: a plausible, intact, never-used definition is exactly what a future editor finds, trusts and builds on. The class names `.btn--bone` and `.eyebrow--brass` are unrelated and still live — they are BEM modifiers, not tokens. --ovmenu-bg survives because css/nav.css:312 still reads it, and the name carries real meaning there: the overlay's ground is a deliberate choice between the two reds, not just "the primary". */ --ovmenu-bg: var(--primary-deep); /* -deep: the .ov-corner labels are 0.7rem at opacity .85, and bright red would give them only 4.37:1 */ /* ---- Type ------------------------------------------------------------ Two variable families replace three static ones (Fraunces + Anton + Inter Tight). Jost is a geometric sans that holds up at weight 200 in wide caps — the reference's display voice — and collapses to Century Gothic / Futura, which are metrically close, rather than to Arial. This INVERTS the old type law documented at base.css:27. That system said "uppercase reserved for eyebrows only" and tracked every heading to -.02em at weight 700-800. The new one is thin, wide and capitalised. Deliberate reversal, not drift. */ --display: "Jost", "Century Gothic", Futura, system-ui, sans-serif; --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --grotesque: var(--display); /* the oversized cine/corridor voice is now the same family, differentiated by weight */ /* nav.css asks for these two and nothing has ever defined them, so the brand mark has been silently falling back to its own second choice. */ --font-display: var(--display); --font-body: var(--sans); /* Display sizes step up ~15%: caps occupy less optical height than lowercase at the same px, so matching the old presence needs more. Body sizes are NOT touched — 17px was already correct. */ --fs-hero: clamp(2.9rem, 7.8vw, 6.4rem); --fs-h1: clamp(2.5rem, 6vw, 4.6rem); --fs-h2: clamp(2.15rem, 4.5vw, 3.7rem); --fs-h3: clamp(1.4rem, 2.3vw, 1.95rem); --fs-lead: clamp(1.08rem, 1.5vw, 1.3rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.9375rem; /* 15px floor */ --fs-eyebrow: 0.8125rem; --fs-ghost: clamp(7rem, 26vw, 22rem); /* the background numeral/word */ /* ---- Space & rhythm -------------------------------------------------- */ --gap: clamp(1rem, 2.5vw, 1.75rem); --section: clamp(3.5rem, 9vw, 8rem); --maxw: 1240px; --maxw-text: 68ch; /* ---- Structure ------------------------------------------------------- */ --edge: 1px solid rgba(255, 255, 255, .14); /* hairline on dark */ --edge-dk: 1px solid var(--hair); /* hairline on light */ --lift: 5px; /* Tenon button offset */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); /* alias — exit transitions */ --ease-io: cubic-bezier(.4, 0, .2, 1); /* symmetric — fluid fill */ --dur: .32s; --dur-lg: .52s; /* loader bar, cine reveal */ --dur-xl: .72s; /* overlay lift, 3D swap */ /* ---- Layers ---------------------------------------------------------- */ --z-dock: 40; --z-head: 50; --z-menu: 60; --z-modal: 70; } /* Motion is a wayfinding tool, not decoration — kill it all on request. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }