/** * Lambo's Puppy Palace — Design Tokens * --------------------------------------------------------------------------- * The single source of truth for the brand. Every colour, size, radius and * shadow used anywhere in the theme resolves back to a variable declared here. * Change a value here and it propagates across the whole site. */ :root { /* --------------------------------------------------------------------- * Palette — warm, light and premium. Deliberately low-saturation so the * photography carries the colour and the interface stays sophisticated. * ------------------------------------------------------------------- */ /* Neutrals: warm cream through to dark brown */ --lpp-cream: #fdfaf5; --lpp-cream-deep: #f8f2e8; --lpp-beige: #f0e7d8; --lpp-beige-deep: #e7dbc7; --lpp-warm-grey: #edeae4; --lpp-warm-grey-deep: #ded9d0; --lpp-brown: #3b312a; --lpp-brown-soft: #6b5d51; /* Darkened from #9a8b7d, which measured 3.17:1 on cream — below the 4.5:1 * WCAG AA minimum for the small uppercase text it is used on. Now 4.7:1. */ --lpp-brown-faint: #7d6f62; --lpp-white: #ffffff; /* Accents * --lpp-gold is a fill colour: buttons, indicators, rules. * --lpp-gold-deep is the *text* gold and must clear 4.5:1 on cream. It was * #8f7043 (4.42:1 — a near miss that failed AA); #7d6238 * measures 5.5:1 and reads as the same antique gold. * --lpp-on-gold is what goes on top of a gold fill. White on --lpp-gold * is only 3.1:1, so the primary button uses deep brown * instead, which measures 5.0:1 and looks richer. */ --lpp-gold: #b08d57; --lpp-gold-lift: #c19a5f; --lpp-gold-deep: #7d6238; --lpp-on-gold: #2a231d; --lpp-gold-soft: #e4d3b8; --lpp-gold-wash: #f7f0e3; --lpp-sage: #7f9478; --lpp-sage-deep: #62775c; --lpp-sage-soft: #cfdbc9; --lpp-sage-wash: #eef2ec; --lpp-peach: #e2b3a2; --lpp-peach-soft: #f5e0d7; --lpp-peach-wash: #fbf1ec; /* Feedback */ --lpp-success: #4f7a52; --lpp-success-wash: #eaf2ea; --lpp-error: #a8453c; --lpp-error-wash: #f8ecea; /* --------------------------------------------------------------------- * Semantic assignments — components reference these, not the raw palette. * ------------------------------------------------------------------- */ --lpp-bg: var(--lpp-cream); --lpp-bg-alt: var(--lpp-cream-deep); --lpp-bg-warm: var(--lpp-beige); --lpp-surface: var(--lpp-white); --lpp-surface-sunk: var(--lpp-warm-grey); --lpp-text: var(--lpp-brown); --lpp-text-muted: var(--lpp-brown-soft); --lpp-text-faint: var(--lpp-brown-faint); --lpp-text-invert: var(--lpp-cream); --lpp-accent: var(--lpp-gold); --lpp-accent-deep: var(--lpp-gold-deep); --lpp-border: #e6ded1; --lpp-border-strong: #d5c9b6; --lpp-focus: var(--lpp-sage-deep); /* --------------------------------------------------------------------- * Typography * Fraunces — variable soft serif for headings (warm, elegant, rounded). * DM Sans — variable geometric sans for body (clean, highly readable). * Both self-hosted; see assets/fonts. No third-party font requests. * ------------------------------------------------------------------- */ --lpp-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Georgia", serif; --lpp-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Fluid type scale — clamp(min, preferred, max). * Scales smoothly from 360px to 1400px viewports with no breakpoint jumps. */ --lpp-text-xs: 0.78rem; --lpp-text-sm: 0.875rem; --lpp-text-base: 1rem; --lpp-text-md: clamp(1.03rem, 0.99rem + 0.20vw, 1.15rem); --lpp-text-lg: clamp(1.18rem, 1.10rem + 0.38vw, 1.40rem); --lpp-text-xl: clamp(1.40rem, 1.26rem + 0.66vw, 1.80rem); --lpp-text-2xl: clamp(1.70rem, 1.44rem + 1.15vw, 2.40rem); --lpp-text-3xl: clamp(2.05rem, 1.62rem + 1.90vw, 3.20rem); --lpp-text-4xl: clamp(2.45rem, 1.75rem + 3.10vw, 4.30rem); --lpp-leading-tight: 1.12; --lpp-leading-snug: 1.28; --lpp-leading-normal: 1.62; --lpp-leading-loose: 1.78; --lpp-tracking-tight: -0.022em; --lpp-tracking-snug: -0.012em; --lpp-tracking-wide: 0.02em; --lpp-tracking-caps: 0.14em; /* --------------------------------------------------------------------- * Spacing — 4px base, named by t-shirt size. * ------------------------------------------------------------------- */ --lpp-space-2: 0.125rem; --lpp-space-4: 0.25rem; --lpp-space-6: 0.375rem; --lpp-space-8: 0.5rem; --lpp-space-10: 0.625rem; --lpp-space-12: 0.75rem; --lpp-space-16: 1rem; --lpp-space-20: 1.25rem; --lpp-space-24: 1.5rem; --lpp-space-32: 2rem; --lpp-space-40: 2.5rem; --lpp-space-48: 3rem; --lpp-space-64: 4rem; --lpp-space-80: 5rem; --lpp-space-96: 6rem; /* Vertical rhythm between page sections, fluid */ --lpp-section-y: clamp(3.5rem, 2.4rem + 4.6vw, 7rem); /* --------------------------------------------------------------------- * Layout * ------------------------------------------------------------------- */ --lpp-container: 1200px; --lpp-container-wide: 1400px; --lpp-container-text: 68ch; --lpp-gutter: clamp(1.15rem, 0.7rem + 1.9vw, 2.5rem); --lpp-header-h: 76px; --lpp-header-h-sm: 64px; --lpp-announce-h: 38px; --lpp-mobilebar-h: 68px; /* --------------------------------------------------------------------- * Radii — generous and rounded, per the brief. * ------------------------------------------------------------------- */ --lpp-radius-sm: 8px; --lpp-radius: 14px; --lpp-radius-md: 20px; --lpp-radius-lg: 28px; --lpp-radius-xl: 36px; --lpp-radius-pill: 999px; /* --------------------------------------------------------------------- * Shadows — soft and warm-tinted, never grey/black. * ------------------------------------------------------------------- */ --lpp-shadow-xs: 0 1px 2px rgba(59, 49, 42, 0.05); --lpp-shadow-sm: 0 2px 8px rgba(59, 49, 42, 0.06); --lpp-shadow: 0 6px 20px rgba(59, 49, 42, 0.07), 0 1px 3px rgba(59, 49, 42, 0.04); --lpp-shadow-md: 0 14px 34px rgba(59, 49, 42, 0.09), 0 3px 8px rgba(59, 49, 42, 0.05); --lpp-shadow-lg: 0 26px 60px rgba(59, 49, 42, 0.13), 0 6px 16px rgba(59, 49, 42, 0.06); --lpp-shadow-gold: 0 10px 28px rgba(176, 141, 87, 0.26); /* --------------------------------------------------------------------- * Motion — subtle, quick, never in the way. All durations collapse to * 0.01ms under prefers-reduced-motion (see base.css). * ------------------------------------------------------------------- */ --lpp-ease: cubic-bezier(0.4, 0, 0.2, 1); --lpp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lpp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lpp-dur-fast: 140ms; --lpp-dur: 240ms; --lpp-dur-slow: 420ms; --lpp-dur-slower: 700ms; /* Z-index scale — declared centrally so stacking is never a guess. */ --lpp-z-base: 1; --lpp-z-sticky: 100; --lpp-z-header: 200; --lpp-z-mobilebar: 300; --lpp-z-drawer: 400; --lpp-z-overlay: 500; --lpp-z-toast: 600; }