/* ==========================================================================
Daniel busca casa — design tokens
Direction: "Ficha" (see 2026-09-06-busca-casa-design-brief.md)
Palette: "Eucalipto y Greda" (owner's pick, 2026-09-07)
Target file: src/web/public/tokens.css
Load order: tokens.css -> base.css -> components.css
Every value is final. No token below is a placeholder.
========================================================================== */
/* --- Font loading -----------------------------------------------------------
Put this set in the of layout.eta BEFORE any stylesheet:
The site is installable as a home-screen app, so also self-host the same four
files under /fonts/ and add @font-face rules with font-display: swap, so the
app is not blank when the tailnet has no route to Google. The fallback stacks
below keep metrics close enough that the swap shifts layout by under ~2%.
-------------------------------------------------------------------------- */
:root {
color-scheme: light dark;
/* ---------- Typeface stacks ---------- */
--bc-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--bc-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--bc-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
/* ---------- Type scale (px, fixed unless noted) ---------- */
--bc-text-2xs: 11px; --bc-lh-2xs: 14px;
--bc-text-xs: 12px; --bc-lh-xs: 16px;
--bc-text-sm: 13px; --bc-lh-sm: 18px;
--bc-text-md: 15px; --bc-lh-md: 22px; /* body default */
--bc-text-lg: 17px; --bc-lh-lg: 24px;
--bc-text-xl: 20px; --bc-lh-xl: 26px;
--bc-text-2xl: 24px; --bc-lh-2xl: 28px;
--bc-text-3xl: clamp(27px, 5.5vw, 32px); --bc-lh-3xl: 1.08;
--bc-text-4xl: clamp(34px, 9vw, 46px); --bc-lh-4xl: 1.00; /* UF price, detail */
/* ---------- Weights / axes / tracking ---------- */
--bc-w-regular: 400;
--bc-w-medium: 500;
--bc-w-semibold: 600;
--bc-w-bold: 700;
--bc-w-display: 800;
--bc-wdth-normal: 100; /* font-variation-settings "wdth" */
--bc-wdth-narrow: 88; /* set on html[lang=de] headings — German runs ~30% longer */
--bc-track-display: -0.022em;
--bc-track-body: 0em;
--bc-track-label: 0.08em; /* uppercase micro-labels */
/* ---------- Spacing scale (4px base) ---------- */
--bc-space-0: 0px;
--bc-space-1: 4px;
--bc-space-2: 8px;
--bc-space-3: 12px;
--bc-space-4: 16px;
--bc-space-5: 20px;
--bc-space-6: 24px;
--bc-space-7: 32px;
--bc-space-8: 40px;
--bc-space-9: 48px;
--bc-space-10: 64px;
--bc-gutter: 16px; /* page side padding, phone */
/* ---------- Radii ---------- */
--bc-radius-xs: 4px;
--bc-radius-sm: 6px;
--bc-radius-md: 10px;
--bc-radius-lg: 14px;
--bc-radius-xl: 20px;
--bc-radius-pill: 999px;
--bc-radius-card: 14px;
--bc-radius-photo: 12px; /* top corners of card media only */
--bc-radius-plate: 0 12px 0 0; /* the corner stamp: flush to photo left+bottom */
/* ---------- Layout ---------- */
--bc-container: 1240px;
--bc-sidebar-w: 264px;
--bc-header-h: 56px;
--bc-lanebar-h: 44px;
--bc-filterbar-h: 52px;
--bc-actionbar-h: 64px;
--bc-tap: 44px; /* minimum interactive box */
--bc-safe-top: env(safe-area-inset-top, 0px);
--bc-safe-bottom: env(safe-area-inset-bottom, 0px);
--bc-ratio-card: 4 / 3; /* card cover photo */
--bc-ratio-gallery: 3 / 2; /* detail gallery */
--bc-ratio-map: 4 / 3; /* detail inline map */
--bc-measure: 62ch; /* long-form text max width */
/* ---------- Z-index ---------- */
--bc-z-base: 0;
--bc-z-sticky: 100;
--bc-z-header: 200;
--bc-z-sheet: 300;
--bc-z-modal: 400;
--bc-z-toast: 500;
/* ---------- Motion ---------- */
--bc-dur-1: 120ms; /* press / tint */
--bc-dur-2: 180ms; /* hover, chip toggle */
--bc-dur-3: 240ms; /* sheet, gallery slide */
--bc-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
--bc-ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
/* ---------- Icons ---------- */
--bc-icon-sm: 16px;
--bc-icon-md: 20px;
--bc-icon-lg: 24px;
--bc-icon-stroke: 1.75;
/* ======================================================================
LIGHT THEME — "Eucalipto y Greda". The cool wash stays; the warm greda
(clay) ground is new, so a section has somewhere to sit that is not
another shade of grey. Every text pair measured >= 4.5:1.
====================================================================== */
--bc-paper: #EDF0EE; /* page ground */
--bc-paper-sunken: #EBE3D6; /* greda band: wells, table zebra, status page rows */
--bc-surface: #FBFDFC; /* cards, sheets, header */
--bc-surface-2: #F2F6F3; /* chips at rest, facts cells */
--bc-surface-3: #E5EDE8; /* hover on surface-2, ring track family */
--bc-ink: #14201C; /* 16.4:1 on surface, 14.6:1 on paper, 13.2:1 on greda */
--bc-ink-2: #3B4A44; /* 9.1:1 on surface — secondary text */
--bc-ink-3: #55635E; /* 6.2:1 on surface — muted labels, still AA */
--bc-line: #C8D9D1; /* hairlines */
--bc-line-strong: #B4CCC2; /* dividers, input borders */
--bc-brand: #123F35; /* 11.5:1 on surface — links, primary fill */
--bc-brand-hover: #0A6A4A; /* the ramp runs LIGHTER here: white on it is 6.6:1 */
--bc-brand-press: #0B7D57; /* one step further along that ramp — white on it is 5.1:1 */
--bc-brand-tint: #D3E1DA; /* brand text on it: 8.7:1 */
--bc-on-brand: #FFFFFF; /* 11.7:1 on brand */
--bc-accent: #8A5A0B; /* 5.8:1 on surface — price-drop / stretch text */
--bc-accent-tint: #F6EBD8; /* accent text on it: 5.0:1 */
--bc-accent-mark: #B27614; /* non-text marks only, 3.7:1 (never the sole carrier) */
--bc-info: #17556E; /* 8.0:1 on surface — "New" badge text */
--bc-info-tint: #DCEBF2; /* info text on it: 6.7:1 */
--bc-danger: #9A3B2A; /* 6.8:1 on surface — errors, dismiss */
--bc-danger-tint: #F7E4DE; /* danger text on it: 5.6:1 */
--bc-plate: #14201C; /* the ficha plate over photos — the ink, near-black */
--bc-on-plate: #FFFFFF; /* 16.8:1 */
--bc-on-plate-2: #A3B2AC; /* 7.6:1 — CLP line on the plate */
/* The ring is the product's central judgement, so the bands own their colours instead of
borrowing the palette's: a good house must not print its number in exactly the green used
for every link (--bc-brand), nor a middling one in the amber used for price drops
(--bc-accent), nor a poor one in the grey of every muted label (--bc-ink-3). Ratios are
against --bc-surface #FBFDFC. The bands paint the ring arc, a non-text mark, and the
number inside it at bold 20px on a card or 28px on a detail — large text either way —
so 3:1 would satisfy AA; they are held to 4.5:1 anyway, and that is what caps how light
mid is allowed to go.
high grass green, L* 42.8 against brand's 23.5 (dE76 35). This palette moved the brand
ramp up into a bright eucalyptus (--bc-brand-hover/-press, L* 39-46), so the band
is also pulled off that hue — 151deg against the ramp's 162deg — and cannot be
read as "the button colour"
mid burnt orange, hue 55deg against accent's 74deg (dE76 25); lightness cannot also
move 8 units without falling under 4.5:1, so the shift is carried by hue. The
palette offers --bc-accent-mark for this band, but it only reaches 3.7:1
low cool slate, hue 253deg against ink-3's 171deg (dE76 12) — the one cool neutral in
a warm-green palette, which is what makes it read as inert */
--bc-score-high: #17743F; /* score >= 75 — 5.70:1 */
--bc-score-mid: #B85410; /* 60-74 — 4.77:1 */
--bc-score-low: #66737E; /* < 60 — 4.76:1 */
--bc-score-track: #DAE6E0; /* unfilled arc: 1.26:1 on surface — a track, not a band */
--bc-scrim: rgba(20, 32, 28, 0.56);
--bc-focus: #123F35;
--bc-focus-halo: rgba(18, 63, 53, 0.24);
--bc-selection-bg: #D3E1DA;
--bc-selection-fg: #14201C; /* 12.4:1 on the selection fill */
--bc-skeleton: #E5EDE8;
--bc-skeleton-sheen: #F2F6F3;
--bc-photo-fallback: #C8D9D1; /* behind an image that never loads */
--bc-shadow-1: 0 1px 2px rgba(20,32,28,0.06), 0 1px 1px rgba(20,32,28,0.04);
--bc-shadow-2: 0 2px 4px rgba(20,32,28,0.06), 0 8px 20px -6px rgba(20,32,28,0.10);
--bc-shadow-3: 0 8px 24px -4px rgba(20,32,28,0.14), 0 2px 6px rgba(20,32,28,0.08);
--bc-ring-1: inset 0 0 0 1px var(--bc-line);
/* Metro de Santiago line colors — used ONLY as an 8px dot beside the line
label ("L4"), never as the sole carrier of meaning. */
--bc-metro-l1: #E01E26;
--bc-metro-l2: #C79A00;
--bc-metro-l3: #7C4A22;
--bc-metro-l4: #0A44A8;
--bc-metro-l4a: #0083B8;
--bc-metro-l5: #007C3A;
--bc-metro-l6: #7A2382;
--bc-metro-ring: rgba(20,32,28,0.18);
/* Map pin fills (Leaflet circleMarker): the score bands themselves, not a copy of them.
app.js picks a pin with the same 75/60 thresholds the ring uses, so a pin and that house's
ring have to read as one colour. Aliases, so the bands can never drift away from the pins
again — and they resolve per mode on their own, since the dark block redefines the bands. */
--bc-pin-high: var(--bc-score-high);
--bc-pin-mid: var(--bc-score-mid);
--bc-pin-low: var(--bc-score-low);
--bc-pin-stroke: #FFFFFF; /* halo against map tiles, not against a surface */
/* Browser UI: plus a second
meta with media="(prefers-color-scheme: dark)" content="#0D1512". */
--bc-theme-color: #EDF0EE;
}
/* ======================================================================
DARK THEME — "Sombra". The same palette after dark: the greda band goes to
a warm near-black. Mirrors every semantic token; all pairs >= 4.5:1.
====================================================================== */
@media (prefers-color-scheme: dark) {
:root {
--bc-paper: #0D1512;
--bc-paper-sunken: #12100B; /* greda band, after dark */
--bc-surface: #1B2A25;
--bc-surface-2: #22332C;
--bc-surface-3: #2B3D35;
--bc-ink: #E1EBE6; /* 12.3:1 on surface, 15.2:1 on paper, 15.6:1 on greda */
--bc-ink-2: #C2D0CA; /* 9.4:1 */
--bc-ink-3: #A3B2AC; /* 6.8:1 */
--bc-line: #2C3D36;
--bc-line-strong: #4E6A5F;
--bc-brand: #25A483; /* 4.8:1 on surface */
--bc-brand-hover: #4FBFA0;
--bc-brand-press: #74D3B8; /* one step further along the same ramp */
--bc-brand-tint: #112B24; /* brand text on it: 4.8:1 */
--bc-on-brand: #0D1512; /* 5.9:1 on brand fill — white would only reach 3.1:1 */
--bc-accent: #F2C877; /* 9.5:1 */
--bc-accent-tint: #3A2C14; /* accent text on it: 8.6:1 */
--bc-accent-mark: #F2C877;
--bc-info: #86C2D8; /* 7.6:1 */
--bc-info-tint: #142833; /* info text on it: 7.8:1 */
--bc-danger: #F09582; /* 6.6:1 */
--bc-danger-tint: #331C16; /* danger text on it: 7.1:1 */
--bc-plate: #070C0A;
--bc-on-plate: #FFFFFF; /* 19.7:1 */
--bc-on-plate-2: #A3B2AC; /* 8.9:1 */
/* The same three shifts mirrored on the dark ground. Ratios are against --bc-surface
#1B2A25; the ring sits on a darker plate still, so these are the floor.
high the grass green again, L* 83.3 vs brand's 60.4 (dE76 40)
mid L* 65.4 vs accent's 82.7 (dE76 33)
low this palette's dark --bc-ink-3 (#A3B2AC) sits at L* 71.3, right where the
retired low band sat, so the separation can no longer be carried by lightness:
the band is pushed further into the blues, hue 266deg against ink-3's 169deg
(dE76 23), with 5.6 units of L* left over. */
--bc-score-high: #6EE886; /* 9.65:1 */
--bc-score-mid: #E8863F; /* 5.63:1 */
--bc-score-low: #87A2C4; /* 5.69:1 */
--bc-score-track: #2B3D35; /* the surface-3 step: a track, not a band */
--bc-scrim: rgba(4, 8, 6, 0.66);
--bc-focus: #4FBFA0;
--bc-focus-halo: rgba(79, 191, 160, 0.28);
--bc-selection-bg: #17453A;
--bc-selection-fg: #E1EBE6; /* 8.8:1 on the selection fill */
--bc-skeleton: #1F2E28;
--bc-skeleton-sheen: #2B3D35;
--bc-photo-fallback: #22332C;
/* Shadows read as nothing on a dark ground: keep them, add a hairline ring. */
--bc-shadow-1: 0 1px 2px rgba(0,0,0,0.44);
--bc-shadow-2: 0 2px 6px rgba(0,0,0,0.48), 0 10px 24px -8px rgba(0,0,0,0.56);
--bc-shadow-3: 0 10px 28px -6px rgba(0,0,0,0.62), 0 2px 8px rgba(0,0,0,0.5);
--bc-ring-1: inset 0 0 0 1px var(--bc-line-strong);
--bc-metro-l1: #FF6058;
--bc-metro-l2: #F0C000;
--bc-metro-l3: #C08248;
--bc-metro-l4: #6A93F0;
--bc-metro-l4a: #45BEEE;
--bc-metro-l5: #35C171;
--bc-metro-l6: #C06AC8;
--bc-metro-ring: rgba(225,235,230,0.22);
/* --bc-pin-* alias the score bands redefined just above; only the halo flips here. */
--bc-pin-stroke: #0D1512;
--bc-theme-color: #0D1512;
}
}
/* ---------- Responsive gutters (adaptive inset rule) ---------- */
@media (min-width: 600px) { :root { --bc-gutter: 24px; } }
@media (min-width: 1024px) { :root { --bc-gutter: 32px; } }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
:root {
--bc-dur-1: 1ms;
--bc-dur-2: 1ms;
--bc-dur-3: 1ms;
}
}
/* ==========================================================================
Base rules that belong with the tokens (paste into base.css if you prefer
tokens.css to hold nothing but custom properties).
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--bc-paper);
color: var(--bc-ink);
font-family: var(--bc-font-ui);
font-size: var(--bc-text-md);
line-height: var(--bc-lh-md);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
/* German headings get the narrow width axis so "Preissenkungen" and
"Grundstücksfläche" stop wrapping in card titles and lane tabs. */
html[lang="de"] .bc-display,
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 {
font-variation-settings: "wdth" var(--bc-wdth-narrow);
}
.bc-display {
font-family: var(--bc-font-display);
font-weight: var(--bc-w-display);
letter-spacing: var(--bc-track-display);
}
.bc-label {
font-size: var(--bc-text-2xs);
line-height: var(--bc-lh-2xs);
letter-spacing: var(--bc-track-label);
text-transform: uppercase;
font-weight: var(--bc-w-semibold);
color: var(--bc-ink-3);
}
.bc-num { font-family: var(--bc-font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--bc-brand); text-underline-offset: 2px; }
:focus-visible {
outline: 2px solid var(--bc-focus);
outline-offset: 2px;
border-radius: var(--bc-radius-xs);
}
::selection { background: var(--bc-selection-bg); color: var(--bc-selection-fg); }
img { max-width: 100%; height: auto; display: block; background: var(--bc-photo-fallback); }
.bc-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bc-container {
width: 100%;
max-width: var(--bc-container);
margin-inline: auto;
padding-inline: var(--bc-gutter);
}