/* ============================================================ Onda — brand tokens (two tiers) TIER 1 below is the canonical pigment source for onda.cat. If you change a value here, port the same value into website-playbook-onda-cat's :root by hand (there is no live cross-repo link — that is a deliberate choice, see the repo CLAUDE.md). RULE: component CSS (base.css, components.css) may reference ONLY the tier-2 --surface-* variables. Never a --onda-* token directly. This is what lets one component rule work unchanged on both the crema and the tinta skin — see .skin-crema / .skin-tinta below. ============================================================ */ :root { /* ---- Tier 1 — pigments. Six brand colours, named literally. ---- */ --onda-crema: #EDE7DA; --onda-crema-sunk: #E4DBCA; /* alternating band on the crema side */ --onda-crema-raised: #F3EFE6; /* a card lifted off crema */ --onda-tinta: #16130E; --onda-tinta-sunk: #100D09; --onda-tinta-raised: #1D1913; /* a card lifted off tinta */ --onda-teal: #3E6E66; --onda-teal-deep: #274842; --onda-taupe: #B9AC98; --onda-sage: #9DA891; /* named so it stops being an invisible RGB literal inside sphere.js */ --onda-teal-sage: #6E8B7E; /* derived washes — documented, not free inventions */ --onda-teal-wash-light: #E6ECE9; /* teal @ ~6% over crema */ --onda-teal-wash-dark: rgba(62,110,102,.16); /* teal @ ~16% over tinta */ /* raw triplets, for rgba()/canvas use */ --onda-crema-rgb: 237,231,218; --onda-tinta-rgb: 22,19,14; /* ---- Tier 1 — non-colour ---- */ --onda-display: 'Fraunces', Georgia, 'Times New Roman', serif; --onda-sans: 'Inter', system-ui, -apple-system, sans-serif; --onda-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --onda-max: 72rem; --onda-measure: 60ch; --onda-pad: clamp(1.25rem, 5vw, 3rem); --onda-section-y: clamp(4.5rem, 9vh, 7.5rem); --onda-radius: 16px; --onda-radius-sm: 10px; --onda-ease: cubic-bezier(.16,1,.3,1); } /* ================================================================ Tier 2 — semantic surface aliases ("skins") by default; any section may flip with
. Inheritance does the rest. ================================================================ */ .skin-crema { --surface-bg: var(--onda-crema); --surface-bg-sunken: var(--onda-crema-sunk); --surface-bg-raised: var(--onda-crema-raised); --surface-text: var(--onda-tinta); --surface-text-muted: #5B564C; --surface-text-faint: #948B7A; --surface-hairline: #DCD3C2; --surface-hairline-strong: rgba(22,19,14,.22); /* non-text UI (rules, marks, icon strokes, the O's counter) */ --surface-accent: var(--onda-teal); /* text that must actually pass contrast — differs per skin, see below */ --surface-accent-text: var(--onda-teal-deep); --surface-accent-wash: var(--onda-teal-wash-light); --surface-accent-ink: var(--onda-crema); /* text ON a solid teal fill */ --surface-btn-fill: var(--onda-tinta); --surface-btn-ink: var(--onda-crema); --surface-focus: var(--onda-teal-deep); --surface-selection-bg: var(--onda-teal); --surface-selection-ink: var(--onda-crema); } .skin-tinta { --surface-bg: var(--onda-tinta); --surface-bg-sunken: var(--onda-tinta-sunk); --surface-bg-raised: var(--onda-tinta-raised); --surface-text: var(--onda-crema); --surface-text-muted: #A59E8E; --surface-text-faint: #7C766A; --surface-hairline: rgba(237,231,218,.10); --surface-hairline-strong: rgba(237,231,218,.22); --surface-accent: var(--onda-teal); /* teal-on-tinta is ~3.2:1 — fails AA for text. Sage-on-tinta is ~7.5:1. This is the whole reason tier 2 exists: the brand rule ("teal only on the O and on actions") survives, and small text stays legible. */ --surface-accent-text: var(--onda-sage); --surface-accent-wash: var(--onda-teal-wash-dark); --surface-accent-ink: var(--onda-crema); --surface-btn-fill: var(--onda-crema); --surface-btn-ink: var(--onda-tinta); --surface-focus: var(--onda-sage); --surface-selection-bg: var(--onda-teal); --surface-selection-ink: var(--onda-crema); } /* The sphere reads these directly via getComputedStyle — see sphere.js. Must stay plain hex literals: custom properties are not resolved to rgb() by getComputedStyle, so var() chains or color-mix() would break it. */ .sphere { --sph-0: #3E6E66; --sph-1: #6E8B7E; --sph-2: #9DA891; --sph-3: #B9AC98; --sph-4: #EDE7DA; --sph-link-rgb: 237,231,218; } /* Paint whichever element actually carries the skin class — not just body. A
nested inside a crema page must repaint itself; only re-declaring the custom properties (as .skin-tinta above does) is not enough, because nothing else reads --surface-bg/-text by default. This is what makes the tinta hero/bookend sections work. */ .skin-crema, .skin-tinta { background: var(--surface-bg); color: var(--surface-text); } ::selection { background: var(--surface-selection-bg); color: var(--surface-selection-ink); }