/* TRACK/FIELD — design tokens Single source of truth for color, type, spacing, containers, borders, ratios. Tokens are prefixed --fo- because Dawn defines --color-* as "R,G,B" triplets consumed via rgba(). Prefixing keeps both systems intact. Never hardcode a hex value or magic spacing number in a section or snippet. */ :root { /* ---- Brand palette ----------------------------------------------------- Exact values from the supplied brand assets (brand-assets-preview.html). Do not approximate these from memory or re-derive them from an image. The UI chrome is built from warm white, bone and charcoal; the saturated half of the palette belongs to photography, merchandise and occasional editorial accents — never to buttons and forms. Contrast against the page ground (#f7f5f1): charcoal 14.27 · muted text 6.67 · subtle text 5.87 · aged brass 5.48 · lacquer red 5.45. Every accent clears AA. NOTE: charcoal on aged brass is only 2.60 — put paper on brass, never charcoal. */ --fo-warm-white: #f0e5d7; /* brand cream — now a surface, not the page ground */ --fo-bone: #daccbb; /* Page ground: a barely-warm off-white. The brand cream read too heavy across a full page; it is retained above for panels and secondary surfaces. */ --fo-paper: #f7f5f1; --fo-charcoal: #242423; --fo-ink-blue: #162431; --fo-olive: #3a3817; --fo-rust: #882d09; --fo-oxblood: #5b0e0c; --fo-lacquer-red: #c61810; --fo-aged-brass: #875a24; --fo-walnut: #43280f; /* ---- Color: base ------------------------------------------------------ */ /* Pure white, exactly as every Figma page frame paints it — "the site feels like a white-walled gallery". The design-system frame labels warm white as the background, but the boards themselves are #FFFFFF and the boards are what was designed against; warm white stays in the palette as a surface. */ --fo-color-bg: #ffffff; --fo-color-surface: var(--fo-warm-white); --fo-color-surface-sunken: var(--fo-bone); --fo-color-inverse-bg: var(--fo-charcoal); --fo-color-inverse-text: var(--fo-paper); /* Photography is natural-light and true to life, so images sit on a warm neutral ground rather than a dark studio backdrop. */ --fo-color-photo-backdrop: #ece7df; /* ---- Color: text ------------------------------------------------------ One ink at descending opacity, from the Figma frames. Ratios measured against the white ground; WCAG AA needs 4.5:1 for text, and charcoal needs 63% to reach it, so every rung used for text sits at or above 65%. 80% 8.07:1 prices, contact body, long prose 72% 6.19:1 era, metadata, secondary links 70% 5.75:1 footer blurb 65% 4.89:1 inactive filters, footer meta, kickers, placeholders TWO RUNGS RAISED FROM THE DESIGN. Figma sets the contact kicker at 55% (3.60:1) and form placeholders at 40% (2.41:1); both fail AA, and CLAUDE.md § 10 does not trade accessibility for fidelity. Both now use the 65% rung. This is the one place the site deliberately departs from the Figma colour values. */ --fo-color-text: var(--fo-charcoal); --fo-ink-body: rgba(36, 36, 35, 0.80); --fo-ink-meta: rgba(36, 36, 35, 0.72); --fo-ink-blurb: rgba(36, 36, 35, 0.70); --fo-ink-quiet: rgba(36, 36, 35, 0.65); --fo-ink-kicker: rgba(36, 36, 35, 0.65); /* Figma 55% — raised for AA */ --fo-ink-placeholder: rgba(36, 36, 35, 0.65); /* Figma 40% — raised for AA */ /* Button and inverse text — the Figma's off-white, not the brand cream */ --fo-color-on-inverse: #f8f5ef; --fo-color-text-muted: #5c564c; --fo-color-text-subtle: #655e55; --fo-color-text-on-dark: var(--fo-paper); --fo-color-text-on-dark-muted: rgba(247, 245, 241, 0.78); /* ---- Color: lines ----------------------------------------------------- */ --fo-color-border: rgba(36, 36, 35, 0.12); /* decorative rules only — Figma: charcoal 12% */ /* Control boundaries — inputs, buttons. WCAG 1.4.11 requires 3:1 against the adjacent surface, so these alphas are set by measurement, not by eye: 0.55 over paper = 3.53:1 · 0.42 over charcoal = 3.73:1 */ --fo-color-border-strong: rgba(36, 36, 35, 0.55); --fo-color-border-on-dark: rgba(247, 245, 241, 0.42); /* ---- Color: accents --------------------------------------------------- Used deliberately — a journal tag, a rule, a category label, an editorial panel. Colour mostly arrives through the objects themselves. */ --fo-color-accent: var(--fo-oxblood); --fo-color-accent-alt: var(--fo-ink-blue); /* Interaction colour, per the Figma handover § 5: every text link and the active filter take lacquer red on hover/active, with NO underline. 4.77:1 on the warm-white ground. This is the one place lacquer red is allowed to act as a UI colour rather than punctuation. */ --fo-color-interactive: var(--fo-lacquer-red); /* Small tracked labels — section kickers, footer column heads — are olive in the design, not charcoal. 4.52:1 at 72%. */ --fo-color-label: var(--fo-olive); --fo-color-label-quiet: rgba(58, 56, 23, 0.72); /* Scrim over photography. A flat tint, not a gradient. Imagery is bright, so label scrims have to work harder than a mood tint. */ --fo-scrim: rgba(36, 36, 35, 0.32); --fo-scrim-strong: rgba(36, 36, 35, 0.5); --fo-scrim-hover: rgba(36, 36, 35, 0.62); /* ---- Color: states ---------------------------------------------------- */ --fo-color-sold: #655e55; --fo-color-focus: var(--fo-ink-blue); --fo-color-error: #8a3324; --fo-color-success: #3d5c3a; /* ---- Typography ------------------------------------------------------- Assembly sets display type; Sento Sans sets body text. This supersedes the mood board (§ 07), which pairs Sento Sans with Lora — the founder corrected it on 2026-09-08. Do not reintroduce Lora: the body face is a geometric sans, not a serif. BOTH FACES ARE COMMERCIAL AND NEITHER IS PRESENT. Nothing on the site renders in them today; the fallbacks below are what a visitor actually sees. Never download or embed either file without a licence — obtain a webfont licence, drop the .woff2 into src/fonts/, and add @font-face. Each face leads its own stack, so installing either one is a no-op for every component. The fallbacks hold the right character — geometric sans throughout — with display leaning Futura-geometric and body leaning Avenir-humanist so the two roles stay distinguishable until the real faces arrive. See docs/FOUND_OBJECTS_SITE_SPEC.md § 4. */ --fo-font-display: 'Assembly', 'Futura', 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif; --fo-font-body: 'Sento Sans', 'Avenir Next', 'Avenir', 'Segoe UI', ui-sans-serif, system-ui, sans-serif; --fo-weight-regular: 400; --fo-weight-medium: 500; --fo-weight-semibold: 600; /* Figma's SemiBold: card names, buttons, spec values */ --fo-weight-bold: 700; /* Type scale — exact values from the Figma design-system frame. Display sizes step down at the tablet and mobile breakpoints rather than scaling fluidly, because the design specifies discrete sizes per board. */ --fo-text-display-lg: 4.5rem; /* 72px — display / large */ --fo-text-h1: 3rem; /* 48px */ --fo-text-h2: 2.25rem; /* 36px */ --fo-text-h3: 1.75rem; /* 28px */ --fo-text-contact: 2.75rem; /* 44px — "Acquire, rent, or consult" */ --fo-text-tagline: 1.375rem; /* 22px — hero tagline */ --fo-text-lg: 1.125rem; /* 18px — body large, card item name */ --fo-text-base: 1rem; /* 16px — body default */ --fo-text-sm: 0.875rem; /* 14px — body small, footer links, price */ --fo-text-xs: 0.8125rem; /* 13px — card meta, form labels */ --fo-text-input: 0.9375rem; /* 15px — form input text */ --fo-text-eyebrow: 0.75rem; /* 12px — tracked labels, metadata */ --fo-text-badge: 0.625rem; /* 10px — availability badge */ --fo-text-footer-meta: 0.6875rem; /* 11px — footer bottom bar */ /* Tracked uppercase labels are 1.5px of letter-spacing in the design; at 12px that is 0.125em. Expressed in em so it holds at any size. */ --fo-tracking-label: 0.125em; --fo-leading-tight: 1.1; /* display */ --fo-leading-snug: 1.3; /* subheads */ --fo-leading-normal: 1.5; /* body */ --fo-leading-relaxed: 1.6; /* long-form prose at the wider measure */ --fo-tracking-display: -0.015em; --fo-tracking-normal: 0; --fo-tracking-wide: 0.06em; --fo-tracking-eyebrow: 0.14em; /* The wordmark is set noticeably wider than any other type in the system */ --fo-tracking-wordmark: 0.3em; /* ---- Spacing ---------------------------------------------------------- */ --fo-space-1: 0.25rem; --fo-space-2: 0.5rem; --fo-space-3: 0.75rem; --fo-space-4: 1rem; --fo-space-5: 1.5rem; --fo-space-6: 2rem; --fo-space-7: 2.5rem; --fo-space-8: 3rem; --fo-space-9: 4rem; --fo-space-10: 5rem; --fo-space-11: 6rem; --fo-space-12: 7.5rem; /* ---- Vertical rhythm -------------------------------------------------- Three steps only. More than three stops reading as a system and starts reading as noise, so every vertical gap on the site is one of these. stack-sm within a group — label to value, image to caption stack-md group to group — heading to body, field to field stack-lg section to section The rule that makes grouping legible: the space around a group must be larger than the space inside it. stack-lg > stack-md > stack-sm, always. */ --fo-stack-sm: var(--fo-space-3); /* 12px */ --fo-stack-md: var(--fo-space-5); /* 24px */ --fo-stack-lg: var(--fo-space-8); /* 48px */ /* Between major page sections */ --fo-section-gap: clamp(2.5rem, 4vw, 3.5rem); /* 40–56px */ --fo-section-gap-tight: clamp(1.5rem, 2.5vw, 2.25rem); /* 24–36px */ /* ---- Containers ------------------------------------------------------- Three boards, three frames (Figma handover § 6): desktop 1440 → 1280 content, 80px side margins tablet 834 → 738 content, 48px side margins mobile 390 → 350 content, 20px side margins --fo-content and --fo-gutter are reassigned per breakpoint at the bottom of this file; components only ever read the variables. */ --fo-content: 100%; --fo-gutter: 1.25rem; /* 20px — mobile */ --fo-grid-gap: 2rem; /* 32px — card grid gutter */ --fo-section-pad-y: 2rem; /* 32px — mobile section padding */ --fo-measure: 46.875rem; /* 750px — text never runs wider than this */ --fo-container-narrow: 46rem; /* ---- Borders & radii (restrained — no large rounded cards) ------------ */ --fo-hairline: 1px; --fo-radius-none: 0; --fo-radius-sm: 2px; /* buttons, badges — the only rounding in the system */ /* ---- Image ratios ----------------------------------------------------- */ --fo-ratio-product: 4 / 5; --fo-ratio-editorial: 3 / 2; --fo-ratio-tile: 1 / 1; --fo-ratio-hero: 16 / 9; /* ---- Controls --------------------------------------------------------- */ --fo-control-height: 3rem; --fo-control-padding-x: var(--fo-space-5); --fo-focus-ring-width: 2px; --fo-focus-ring-offset: 2px; /* ---- Motion (subtle only) --------------------------------------------- */ --fo-duration-fast: 120ms; --fo-duration: 220ms; --fo-duration-slow: 400ms; --fo-ease: cubic-bezier(0.2, 0, 0.2, 1); } /* Breakpoints are documented here for reference — CSS custom properties cannot be used inside media queries. Values match Dawn's so there is one system: sm 480px · md 750px · lg 990px · xl 1200px */ /* ---- Breakpoints -------------------------------------------------------- The three Figma boards. Tablet takes over at 768 and desktop at 1200, so the 834 and 1440 boards each sit comfortably inside their range. */ @media screen and (min-width: 768px) { :root { --fo-content: 46.125rem; /* 738px */ --fo-gutter: 3rem; /* 48px */ --fo-grid-gap: 2rem; /* 32px */ --fo-section-pad-y: 3rem; /* 48px */ } } @media screen and (min-width: 1200px) { :root { --fo-content: 80rem; /* 1280px */ --fo-gutter: 5rem; /* 80px */ --fo-grid-gap: 3rem; /* 48px */ --fo-section-pad-y: 3rem; /* 48px */ } } @media (prefers-reduced-motion: reduce) { :root { --fo-duration-fast: 0ms; --fo-duration: 0ms; --fo-duration-slow: 0ms; } }