/* --- name: tokens.css description: Brand variables — Lorayne's declared mockup (cream / teal / brass, Fraunces + Work Sans). version: 0.3 date: 2026-07-19 --- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Work+Sans:wght@300;400;500;600&display=swap'); :root { /* === Palette, MEASURED from Lorayne's own landing-page design (Brand_Mockup_Website.jpg) on 2026-08-10, not eyeballed. A row-by-row profile of that image gives four flat bands: 0.0 - 41.7% header + hero #665646 the darker brown 41.7 - 64.8% category tiles (imagery) 64.8 - 91.3% values row #DDD1C3 the page beige 91.3 - 100% footer #665646 the same brown plus a teal accent of #316B7F on her buttons and story band. Jerry's instruction 2026-08-10: that beige is the background for EVERY page, and the top banner is the brown. === */ --bg: #DDD1C3; /* page background — her beige */ --bg-alt: #E7DCD3; /* alt band / card bg — the lighter beige of her option cards */ --ink: #1C1A17; /* primary text */ --ink-soft: #59544C; /* muted text */ --teal-deep: #24525F; /* header, buttons, story band — her teal, darkened */ --teal: #316B7F; /* links, accents, underlines — measured from her buttons */ --teal-bright: #2E8E85; /* hover / bright accent */ --brass: #A9834F; /* botanical / warm metal accent */ --line: rgba(28,26,23,0.12); --warn: #A9834F; /* === Brand band — the brown field shared by the site header, the landing hero and the footer. NO LONGER PROVISIONAL: measured from Lorayne's own landing-page design on 2026-08-10, where the header, hero and footer are all this one brown. Supersedes the #5A4A3B sampled off the hero photo's studio backdrop. Change --band-bg here and every band moves together — do not re-introduce a literal in layout.css or components.css. === */ --band-bg: #665646; /* header + hero + footer — measured */ --band-bg-deep: #3A2E23; /* mockup-style footer; button ink on band */ --band-ink: #F7F2E9; /* cream type on the band */ --band-ink-soft: rgba(247,242,233,0.80); --band-gold: #E3C08A; /* eyebrow, active underline, headings */ --band-line: rgba(247,242,233,0.16); /* === Cut-out tile ground — the square behind the piece and variant shots on every design page. Jerry 2026-08-13: try a warm neutral BETWEEN the band brown and the page beige, replacing the teal trialled on 2026-08-11. Reasoning for the value: the tiles hold gold, silver and copper cut-outs, so the ground has to sit far enough from gold in VALUE that a warm piece still reads. Sitting at the exact midpoint of #665646 and #DDD1C3 (#A29485) is too light for that — gold flattens into it. This is roughly a third of the way toward the beige and slightly desaturated, which keeps it clearly a brand neutral while leaving the metals room. Retune HERE, never in design-page.css. Alternates worth trying, darker to lighter: #7B6E60, #8C7E6E, #9A8C7C. === */ --tile-ground: #8C7E6E; /* === Style-column header boxes — Design Offerings row (Lorayne's sketch, docs/new DesignOptionsRow.PNG, 2026-08-14). ONE COLOUR PER COLUMN, not one per collection. Her sketch gives the two Artisan columns different colours and Jerry ruled she wins: "multiple colors need multiple boxes". The colour is not decoration — it is an INDEX. In her sketch each stone-option group in the band below repeats its column's colour, which is how a reader knows which stones belong to which Style. Two columns sharing a colour would break that link. Her palette (olive / purple / rust) is AI-chosen and not ours, so these are the brand equivalents: teal for Premier, and the two Artisan metals get their own metal-derived warm tones. --copper and --bronze are new. They are not invented decoration: the Artisan line is DEFINED as brass, copper and bronze, and the palette carried only brass, so a copper column had no colour to use. Bronze is here because bronze is confirmed in stock and will need a column the moment a design records it. If a Style is neither a metal nor a collection (Winged Heart's two Styles differ by SHELL), cycle these in order rather than inventing a colour. === */ --style-premier: #316B7F; /* = --teal. The brass column uses --brass above. */ --copper: #9C5B3E; /* warm copper, valued to sit with --brass */ --bronze: #7A6034; /* darker, greener than brass — not yet used */ /* Added 2026-08-15 with her Master List fold, which introduced two metals the palette had no column colour for. Both are deliberately COOL, so they read as the pale finishes they are and never collide with the three warm columns. */ --white-bronze: #6E6A5C; /* pale grey-olive alloy; darker than the disc so cream type clears contrast on the header box */ --silver-plated: #5E6B70; /* cool grey with a teal cast, kin to --style-premier without being it — plating is not sterling */ /* === Model-shot height. ONE value for the worn/model photograph wherever it leads a page: the landing hero and the design-page leaf hero. Jerry 2026-08-13 fixed the landing hero's height because it grew with the viewport and made the laptop view too tall, liked it, and asked for the same size on the design pages -- which had the identical fault in a different unit (`max-height: 70vh`, so a tall screen produced a tall hero). Both now read this token, so the two stay in step; retune HERE. === */ --hero-model-h: 360px; /* === Legacy aliases (repointed so existing layout/components inherit) === */ --turquoise: var(--teal); --turquoise-dark: var(--teal-deep); --turquoise-pale: var(--bg-alt); --mute: var(--ink-soft); /* Aliases used by site code */ --color-teal: var(--teal); --color-teal-dark: var(--teal-deep); --color-teal-light: var(--teal-bright); --color-black: var(--ink); --color-ink: var(--ink); --color-bone: var(--bg); --color-paper: #ffffff; --color-muted: var(--ink-soft); --color-line: var(--line); --bg-page: var(--bg); --bg-card: #ffffff; --bg-elev: #ffffff; --fg-page: var(--ink); --accent: var(--teal); /* === Typography — ALL SERIF (pageDefined.md Common Elements, 2026-08-14) === Body was 'Work Sans', system-ui, sans-serif. The spec says "All fonts should be Serif", which also matches Lorayne's own mockups, where body copy is set in a serif. Both tokens are now Fraunces. It is already loaded, so this costs no extra request, and its optical-size axis (opsz 9..144) means the family has a text-optimised end rather than being display-only. Hierarchy now comes from size and weight instead of a family contrast — the @import pulls 300/400/ 500/600 precisely so that still reads. IF PARAGRAPHS READ TOO CHARACTERFUL AT LENGTH, the fix is here and nowhere else: set --font-body to `Georgia, 'Times New Roman', serif`. That keeps the site all-serif, restores a display/text contrast, and loads nothing. Do NOT solve it by overriding font-family on individual components. */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Fraunces', Georgia, serif; --fs-hero: clamp(2.2rem, 4vw, 3.4rem); --fs-h1: clamp(1.7rem, 3vw, 2.4rem); --fs-h2: clamp(1.4rem, 2.4vw, 2rem); --fs-h3: 1.1rem; --fs-body: 1rem; --fs-small: 0.85rem; --lh-tight: 1.12; --lh-body: 1.6; /* === Spacing === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 2px; --radius: 3px; --radius-lg: 8px; --container: 1200px; --container-narrow: 760px; --shadow-soft: 0 2px 14px rgba(14,59,59,0.10); --shadow-card: 0 1px 2px rgba(0,0,0,0.05); --ease: cubic-bezier(.2,.7,.2,1); --dur: 180ms; }