/* ======================================================================= Pawfect Dogcare — Design Tokens Ported from /design/tokens.css. Dark mode is keyed on [data-theme="dark"] (set by uikit's themeBoot inline script in ) instead of a wrapper class, so a top-level toggle is instant and FOUC-free across the whole document. ======================================================================= */ :root { /* -------- Brand: warm rust / forest / cream ------------------------- */ --pf-rust-50: #fbf3ee; --pf-rust-100: #f4e0d2; --pf-rust-200: #e8bda3; --pf-rust-300: #d99878; --pf-rust-400: #c97651; --pf-rust-500: #b85a36; --pf-rust-600: #9a4626; --pf-rust-700: #783619; --pf-rust-800: #552411; --pf-rust-900: #2e1408; --pf-forest-50: #f1f3ee; --pf-forest-100: #dde2d4; --pf-forest-200: #b9c2a6; --pf-forest-300: #8e9b78; --pf-forest-400: #677556; --pf-forest-500: #4a583c; --pf-forest-600: #38442d; --pf-forest-700: #2a3322; --pf-forest-800: #1c2317; --pf-forest-900: #0f140c; --pf-cream-50: #fbf8f3; --pf-cream-100: #f5efe6; --pf-cream-200: #ebe2d2; --pf-cream-300: #d8c9b1; --pf-ink-900: #2a221b; --pf-ink-700: #5a4d40; --pf-ink-500: #8a7d6e; --pf-ink-300: #b8ac9c; /* -------- Surfaces (light) ----------------------------------------- */ --pf-bg: var(--pf-cream-50); --pf-bg-soft: var(--pf-cream-100); --pf-bg-strong: var(--pf-cream-200); --pf-border: rgba(58, 32, 18, 0.12); --pf-border-strong: rgba(58, 32, 18, 0.22); /* Glass + photo overlays */ --pf-glass-1: rgba(255, 251, 245, 0.55); --pf-glass-2: rgba(255, 251, 245, 0.72); --pf-glass-3: rgba(255, 251, 245, 0.88); --pf-glass-tint: rgba(184, 90, 54, 0.05); --pf-glass-border: rgba(255, 255, 255, 0.55); --pf-glass-shadow: 0 1px 0 0 rgba(255,255,255,0.8) inset, 0 -1px 0 0 rgba(0,0,0,0.04) inset, 0 8px 32px -8px rgba(58, 32, 18, 0.18), 0 24px 48px -16px rgba(58, 32, 18, 0.10); --pf-glass-shadow-hover: 0 1px 0 0 rgba(255,255,255,0.9) inset, 0 -1px 0 0 rgba(0,0,0,0.04) inset, 0 12px 40px -8px rgba(58, 32, 18, 0.24), 0 32px 60px -16px rgba(58, 32, 18, 0.14); --pf-blur: 24px; --pf-blur-strong: 36px; /* -------- Typography ----------------------------------------------- */ --pf-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --pf-font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --pf-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; /* HB Labs trademark font: locked to Inter for the "crafted by" lockup so the footer always reads as HB Labs regardless of the page's display family. Variable so it can be swapped via a CSS drop-in served from the cloud bucket once that pipeline is wired. */ --hb-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --pf-text-xs: 12px; --pf-text-sm: 13px; --pf-text-base: 15px; --pf-text-md: 17px; --pf-text-lg: 20px; --pf-text-xl: 26px; --pf-text-2xl: 34px; --pf-text-3xl: 44px; --pf-text-4xl: 60px; --pf-text-hero: clamp(44px, 8vw, 96px); --pf-leading-tight: 1.05; --pf-leading-snug: 1.3; --pf-leading-normal: 1.55; --pf-tracking-tight: -0.02em; --pf-tracking-display: -0.025em; --pf-tracking-wide: 0.08em; /* -------- Spacing (4px base) --------------------------------------- */ --pf-1: 4px; --pf-2: 8px; --pf-3: 12px; --pf-4: 16px; --pf-5: 20px; --pf-6: 24px; --pf-7: 32px; --pf-8: 40px; --pf-9: 56px; --pf-10: 72px; --pf-11: 96px; /* -------- Radii ---------------------------------------------------- */ --pf-r-sm: 8px; --pf-r-md: 14px; --pf-r-lg: 20px; --pf-r-xl: 28px; --pf-r-2xl: 36px; --pf-r-pill: 999px; /* -------- Motion --------------------------------------------------- */ --pf-ease: cubic-bezier(.2, .7, .3, 1); --pf-ease-out: cubic-bezier(.16, 1, .3, 1); --pf-dur-fast: 140ms; --pf-dur: 220ms; --pf-dur-slow: 360ms; /* -------- Page layout --------------------------------------------- */ --pf-page-max: 1280px; --pf-gutter: clamp(20px, 4vw, 56px); } /* ======================================================================= Dark mode — keyed off set by uikit's inline themeBoot. Mirrors design/tokens.css :where(.pf-dark) but scoped at document root so descendants pick it up without an extra wrapper. ======================================================================= */ [data-theme="dark"] { --pf-ink-900: #f4ece0; --pf-ink-700: #c9bfb0; --pf-ink-500: #8a7e6e; --pf-ink-300: #5a5043; --pf-cream-50: #1a1410; --pf-cream-100: #221a14; --pf-cream-200: #2c241c; --pf-cream-300: #3a3127; --pf-bg: #14100c; --pf-bg-soft: #1c1611; --pf-bg-strong: #251c14; --pf-border: rgba(255, 240, 220, 0.10); --pf-border-strong: rgba(255, 240, 220, 0.18); --pf-glass-1: rgba(40, 28, 20, 0.55); --pf-glass-2: rgba(40, 28, 20, 0.72); --pf-glass-3: rgba(28, 20, 14, 0.88); --pf-glass-tint: rgba(217, 152, 120, 0.06); --pf-glass-border: rgba(255, 240, 220, 0.10); --pf-glass-shadow: 0 1px 0 0 rgba(255,240,220,0.06) inset, 0 -1px 0 0 rgba(0,0,0,0.3) inset, 0 8px 32px -8px rgba(0, 0, 0, 0.5), 0 24px 48px -16px rgba(0, 0, 0, 0.4); }