/* ============================================================= BEDS ON THE BEND: DESIGN TOKENS (v1.1, dark-first) Palette "Still Water", REVISED 2026-07-08 (Terry): primary teal is now #193543 (darker, bluer, inkier); replaces #215D5A. Author: Iris. DIRECTION (Felicia, 2026-07-08): DARK-FIRST. The deep teal is the ENVELOPING ground on most surfaces. Gold is accent touches only. The cream/sand light sections are the PUNCTUATION that creates rhythm, not the default ground. CTAs are restrained (premium over loud). HOW THE INVERSION LIVES IN THE TOKEN LAYER: The default (:root) contextual roles resolve to the DARK ground. A single `.on-light` scope (bottom of this file) remaps those same role tokens to the cream ground. Components reference roles (--surface, --fg, --fg-muted, --fg-accent, --border-role, --rule), never raw colors, so dropping `.on-light` on any section flips it to a cream punctuation band with zero per-component overrides. ACCESSIBILITY (all ratios computed against #193543, not carried from v1): - Cream body on the dark ground = 12.27:1 (AAA). Muted cream = 7.40:1. - Gold-soft is the accent/link text on dark = 7.73:1 on ground, 5.74:1 on raised cards. Use it for ALL gold-toned text on dark. - Raw gold passes as text on the deep base ground (5.25:1) but FAILS on raised teal (3.90:1) and on cream (2.34:1). So the rule stays simple: gold is a FILL / RULE / DOT; gold-soft carries gold-toned text. - Booking CTA = gold fill + ink-deep label = 6.45:1. - On cream punctuation bands: teal ink = 12.27:1, teal-muted = 7.32:1, bronze (warm accent text / price) = 4.80:1. ============================================================= */ :root { /* ---- BRAND COLORS (solid, "Still Water", locked 2026-07-08) - */ --beds-primary: #193543; /* deep teal: the enveloping ground / anchor ink */ --beds-gold: #C6A059; /* gold: accent fills, rules, pins; NEVER text */ --beds-cream: #FDF9F3; /* cream: punctuation-band surface / text on teal */ --beds-sand: #F4ECD8; /* deep cream: secondary light band */ /* ---- DERIVED (documented, not new brand colors) ------------ */ --beds-teal-raised: #234A5A; /* lifted teal: raised cards/panels on the dark ground */ --beds-ink-deep: #0F2531; /* deepest teal-black: footer floor, label on gold CTA */ --beds-teal-muted: #3C5763; /* blue-slate: muted text on cream (7.32:1) */ --beds-cream-muted: #CFC3AE; /* warm muted cream: secondary text on dark (7.40:1) */ --beds-bronze: #8A6A28; /* deepened gold: warm text-accent on cream (4.80:1) */ --beds-bronze-deep: #6F5420; /* bronze pressed / hover */ --beds-gold-soft: #E4C583; /* lightened gold: accent / link text on dark (7.73:1) */ --beds-gold-deep: #B08C43; /* deepened gold: CTA hover fill */ --beds-paper: #FFFEFB; /* lifted cream: raised card within a light band */ --beds-sand-deep: #E7DCC0; /* hairline / chip fill on cream */ --beds-white: #FFFFFF; /* crisp white */ --beds-bronze-rgb: 138, 106, 40; --beds-gold-soft-rgb: 228, 197, 131; /* ---- RGB HELPERS (power the opacity scales) ---------------- */ --beds-primary-rgb: 25, 53, 67; --beds-gold-rgb: 198, 160, 89; --beds-cream-rgb: 253, 249, 243; --beds-sand-rgb: 244, 236, 216; --beds-teal-raised-rgb: 35, 74, 90; --beds-ink-deep-rgb: 15, 37, 49; /* ---- OPACITY SCALES (05-95, step 5) ------------------------ */ --beds-primary-05: rgba(var(--beds-primary-rgb), 0.05); --beds-primary-10: rgba(var(--beds-primary-rgb), 0.10); --beds-primary-15: rgba(var(--beds-primary-rgb), 0.15); --beds-primary-20: rgba(var(--beds-primary-rgb), 0.20); --beds-primary-25: rgba(var(--beds-primary-rgb), 0.25); --beds-primary-30: rgba(var(--beds-primary-rgb), 0.30); --beds-primary-35: rgba(var(--beds-primary-rgb), 0.35); --beds-primary-40: rgba(var(--beds-primary-rgb), 0.40); --beds-primary-45: rgba(var(--beds-primary-rgb), 0.45); --beds-primary-50: rgba(var(--beds-primary-rgb), 0.50); --beds-primary-55: rgba(var(--beds-primary-rgb), 0.55); --beds-primary-60: rgba(var(--beds-primary-rgb), 0.60); --beds-primary-65: rgba(var(--beds-primary-rgb), 0.65); --beds-primary-70: rgba(var(--beds-primary-rgb), 0.70); --beds-primary-75: rgba(var(--beds-primary-rgb), 0.75); --beds-primary-80: rgba(var(--beds-primary-rgb), 0.80); --beds-primary-85: rgba(var(--beds-primary-rgb), 0.85); --beds-primary-90: rgba(var(--beds-primary-rgb), 0.90); --beds-primary-95: rgba(var(--beds-primary-rgb), 0.95); --beds-gold-05: rgba(var(--beds-gold-rgb), 0.05); --beds-gold-10: rgba(var(--beds-gold-rgb), 0.10); --beds-gold-15: rgba(var(--beds-gold-rgb), 0.15); --beds-gold-20: rgba(var(--beds-gold-rgb), 0.20); --beds-gold-25: rgba(var(--beds-gold-rgb), 0.25); --beds-gold-30: rgba(var(--beds-gold-rgb), 0.30); --beds-gold-35: rgba(var(--beds-gold-rgb), 0.35); --beds-gold-40: rgba(var(--beds-gold-rgb), 0.40); --beds-gold-45: rgba(var(--beds-gold-rgb), 0.45); --beds-gold-50: rgba(var(--beds-gold-rgb), 0.50); --beds-gold-55: rgba(var(--beds-gold-rgb), 0.55); --beds-gold-60: rgba(var(--beds-gold-rgb), 0.60); --beds-gold-65: rgba(var(--beds-gold-rgb), 0.65); --beds-gold-70: rgba(var(--beds-gold-rgb), 0.70); --beds-gold-75: rgba(var(--beds-gold-rgb), 0.75); --beds-gold-80: rgba(var(--beds-gold-rgb), 0.80); --beds-gold-85: rgba(var(--beds-gold-rgb), 0.85); --beds-gold-90: rgba(var(--beds-gold-rgb), 0.90); --beds-gold-95: rgba(var(--beds-gold-rgb), 0.95); --beds-cream-05: rgba(var(--beds-cream-rgb), 0.05); --beds-cream-10: rgba(var(--beds-cream-rgb), 0.10); --beds-cream-15: rgba(var(--beds-cream-rgb), 0.15); --beds-cream-20: rgba(var(--beds-cream-rgb), 0.20); --beds-cream-25: rgba(var(--beds-cream-rgb), 0.25); --beds-cream-30: rgba(var(--beds-cream-rgb), 0.30); --beds-cream-35: rgba(var(--beds-cream-rgb), 0.35); --beds-cream-40: rgba(var(--beds-cream-rgb), 0.40); --beds-cream-45: rgba(var(--beds-cream-rgb), 0.45); --beds-cream-50: rgba(var(--beds-cream-rgb), 0.50); --beds-cream-55: rgba(var(--beds-cream-rgb), 0.55); --beds-cream-60: rgba(var(--beds-cream-rgb), 0.60); --beds-cream-65: rgba(var(--beds-cream-rgb), 0.65); --beds-cream-70: rgba(var(--beds-cream-rgb), 0.70); --beds-cream-75: rgba(var(--beds-cream-rgb), 0.75); --beds-cream-80: rgba(var(--beds-cream-rgb), 0.80); --beds-cream-85: rgba(var(--beds-cream-rgb), 0.85); --beds-cream-90: rgba(var(--beds-cream-rgb), 0.90); --beds-cream-95: rgba(var(--beds-cream-rgb), 0.95); --beds-sand-10: rgba(var(--beds-sand-rgb), 0.10); --beds-sand-15: rgba(var(--beds-sand-rgb), 0.15); --beds-sand-20: rgba(var(--beds-sand-rgb), 0.20); --beds-sand-30: rgba(var(--beds-sand-rgb), 0.30); --beds-sand-40: rgba(var(--beds-sand-rgb), 0.40); --beds-teal-raised-40: rgba(var(--beds-teal-raised-rgb), 0.40); --beds-teal-raised-60: rgba(var(--beds-teal-raised-rgb), 0.60); --beds-teal-raised-70: rgba(var(--beds-teal-raised-rgb), 0.70); --beds-ink-deep-15: rgba(var(--beds-ink-deep-rgb), 0.15); --beds-ink-deep-25: rgba(var(--beds-ink-deep-rgb), 0.25); --beds-ink-deep-30: rgba(var(--beds-ink-deep-rgb), 0.30); --beds-ink-deep-40: rgba(var(--beds-ink-deep-rgb), 0.40); --beds-ink-deep-50: rgba(var(--beds-ink-deep-rgb), 0.50); --beds-ink-deep-60: rgba(var(--beds-ink-deep-rgb), 0.60); --beds-ink-deep-70: rgba(var(--beds-ink-deep-rgb), 0.70); --beds-ink-deep-80: rgba(var(--beds-ink-deep-rgb), 0.80); --beds-ink-deep-85: rgba(var(--beds-ink-deep-rgb), 0.85); --beds-gold-soft-15: rgba(var(--beds-gold-soft-rgb), 0.15); --beds-gold-soft-20: rgba(var(--beds-gold-soft-rgb), 0.20); /* ---- CONSTANT SEMANTIC TOKENS (do NOT flip by context) ----- */ --accent: var(--beds-gold); /* gold: fills, ripple glyph, pin; NEVER text */ --rule-gold: var(--beds-gold); /* the still-water rule, both contexts */ --focus-ring: var(--beds-gold); /* gold ring reads on cream and on teal */ /* Booking CTA (signature): gold fill + near-black label = 6.45:1. */ --cta: var(--beds-gold); --cta-hover: var(--beds-gold-deep); --cta-ink: var(--beds-ink-deep); /* ---- CONTEXTUAL ROLES: DEFAULT = DARK GROUND (dark-first) --- */ --surface: var(--beds-primary); /* page ground */ --surface-raised: var(--beds-teal-raised); /* raised card/panel on the ground */ --surface-deep: var(--beds-ink-deep); /* deepest recess: footer floor */ --fg: var(--beds-cream); /* primary text */ --fg-muted: var(--beds-cream-muted); /* secondary text */ --fg-accent: var(--beds-gold-soft); /* accent / link text */ --fg-accent-hover: var(--beds-white); --border-role: var(--beds-cream-15); /* hairline on the current ground */ --border-strong-role: var(--beds-cream-25); /* stronger divider / outline btn */ --rule: var(--beds-gold); --price-fg: var(--beds-gold-soft); /* price emphasis on dark */ --chip-fill: var(--beds-cream-10); --tag-scrim: var(--beds-ink-deep-70); /* photo tag scrim */ /* ---- FONTS (global) ---------------------------------------- */ --font-display: 'Fraunces', 'Hoefler Text', Georgia, serif; --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- TYPE SCALE (global, fluid) ---------------------------- */ --fs-display: clamp(2.75rem, 1.6rem + 5.1vw, 4.5rem); --fs-h1: clamp(2.15rem, 1.5rem + 2.9vw, 3.25rem); --fs-h2: clamp(1.7rem, 1.35rem + 1.6vw, 2.25rem); --fs-h3: clamp(1.3rem, 1.16rem + 0.7vw, 1.55rem); --fs-h4: 1.0625rem; --fs-price: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); --fs-body-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem); --fs-body: 1.0625rem; /* 17px reading size */ --fs-body-sm: 0.9375rem; /* 15px */ --fs-btn: 0.875rem; /* 14px: restrained button label */ --fs-caption: 0.8125rem; /* 13px */ --fs-eyebrow: 0.75rem; /* 12px kicker, tracked */ --fs-input: 1rem; /* 16px input floor: below this iOS auto-zooms. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ---- SPACING (8px base) ------------------------------------ */ --space-section: var(--space-8); --space-section-sm: var(--space-7); --space-container: clamp(1.25rem, 5vw, 3rem); --space-gap: var(--space-5); --space-gap-lg: var(--space-6); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- LAYOUT ------------------------------------------------- */ --measure: 66ch; --container: 1200px; --container-wide: 1360px; --bp-sm: 30rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 80rem; /* ---- RADIUS ------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 9999px; --border-w: 1px; --border-w-2: 2px; /* ---- SHADOWS (deep ink, so raised objects lift off the dark) */ --shadow-card-light: 0 1px 2px var(--beds-ink-deep-30); --shadow-card: 0 2px 6px var(--beds-ink-deep-30), 0 14px 30px var(--beds-ink-deep-40); --shadow-card-lg: 0 6px 14px var(--beds-ink-deep-40), 0 30px 60px var(--beds-ink-deep-50); /* the focal light booking panel glowing off the dark ground */ --shadow-panel: 0 10px 24px var(--beds-ink-deep-50), 0 34px 70px var(--beds-ink-deep-50); --shadow-focus: 0 0 0 3px var(--beds-gold-40); /* ---- LINE HEIGHTS (a hair looser for dark-ground reading) -- */ --lh-display: 1.06; --lh-heading: 1.16; --lh-body: 1.78; --lh-tight: 1.3; /* ---- LETTER SPACING ---------------------------------------- */ --ls-display: -0.01em; --ls-eyebrow: 0.2em; --ls-label: 0.04em; --ls-body: 0em; /* ---- MOTION ------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --duration-fast: 0.12s; --duration-base: 0.22s; --duration-slow: 0.42s; --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ---- Z-INDEX ----------------------------------------------- */ --z-below: -1; --z-base: 0; --z-above: 1; --z-dropdown: 10; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; } /* ============================================================= .on-light : the cream PUNCTUATION scope. Drop this class on any section/panel to flip every contextual role to the light ground. This is the entire inversion mechanism; components stay untouched. ============================================================= */ .on-light { --surface: var(--beds-cream); --surface-raised: var(--beds-paper); --surface-deep: var(--beds-sand); --fg: var(--beds-primary); --fg-muted: var(--beds-teal-muted); --fg-accent: var(--beds-bronze); --fg-accent-hover: var(--beds-bronze-deep); --border-role: var(--beds-sand-deep); --border-strong-role: var(--beds-primary-20); --rule: var(--beds-gold); --price-fg: var(--beds-primary); --chip-fill: var(--beds-sand); --tag-scrim: var(--beds-ink-deep-70); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; } }