:root { /* ═══════════════════════════════════════════ BRAND PALETTE — Pamperloft Warm brown (bojin), amber gold, olive herb, deep forest. Anchored by cream + ivory. ═══════════════════════════════════════════ */ /* Forest — primary anchor (deep, grounding) */ --forest-50: hsl(134, 30%, 94%); --forest-100: hsl(134, 32%, 86%); --forest-200: hsl(134, 36%, 70%); --forest-300: hsl(134, 40%, 52%); --forest-400: hsl(134, 44%, 32%); --forest-500: hsl(134, 46%, 17%); /* #183f22 — brand */ --forest-600: hsl(134, 48%, 13%); --forest-700: hsl(134, 50%, 9%); /* Amber — accent / call-to-action */ --amber-50: hsl(40, 100%, 96%); --amber-100: hsl(40, 95%, 88%); --amber-200: hsl(40, 92%, 75%); --amber-300: hsl(40, 95%, 60%); --amber-400: hsl(40, 98%, 50%); --amber-500: hsl(40, 98%, 43%); /* #d99202 — brand */ --amber-600: hsl(38, 98%, 36%); --amber-700: hsl(36, 98%, 30%); /* Bojin — warm brown depth */ --bojin-50: hsl(36, 40%, 94%); --bojin-100: hsl(36, 42%, 84%); --bojin-200: hsl(36, 50%, 68%); --bojin-300: hsl(36, 65%, 48%); --bojin-400: hsl(36, 85%, 36%); --bojin-500: hsl(36, 86%, 31%); /* #905a0c — brand */ --bojin-600: hsl(34, 88%, 25%); --bojin-700: hsl(32, 90%, 20%); /* Herb — olive supporting */ --herb-50: hsl(78, 30%, 94%); --herb-100: hsl(78, 34%, 82%); --herb-200: hsl(78, 44%, 60%); --herb-300: hsl(78, 54%, 42%); --herb-400: hsl(78, 60%, 34%); --herb-500: hsl(78, 62%, 29%); /* #56771c — brand */ --herb-600: hsl(78, 65%, 22%); /* Cream — warm neutrals (backgrounds) */ --cream-0: hsl(38, 60%, 99%); /* Near-white ivory */ --cream-50: hsl(38, 45%, 96%); --cream-100: hsl(36, 35%, 92%); --cream-200: hsl(34, 28%, 84%); --cream-300: hsl(32, 20%, 70%); --cream-400: hsl(30, 12%, 54%); --cream-500: hsl(28, 10%, 40%); --cream-600: hsl(26, 12%, 28%); --cream-700: hsl(24, 14%, 18%); --cream-800: hsl(22, 16%, 12%); --cream-900: hsl(20, 18%, 8%); /* Semantic mappings */ --color-bg: var(--cream-0); --color-bg-alt: var(--cream-50); --color-bg-dark: var(--forest-500); --color-bg-deep: var(--forest-600); --color-text: var(--cream-800); --color-text-soft: var(--cream-600); --color-text-muted: var(--cream-400); --color-text-invert: var(--cream-0); --color-accent: var(--amber-500); --color-accent-hover: var(--amber-600); --color-accent-soft: var(--amber-50); --color-primary: var(--forest-500); --color-primary-soft: var(--forest-50); --color-border: var(--cream-100); --color-border-strong: var(--cream-200); --color-success: hsl(142, 60%, 38%); --color-error: hsl(0, 72%, 48%); /* ═══════════════════════════════════════════ TYPOGRAPHY Fraunces (editorial serif, warm) + Outfit (clean modern sans, readable) ═══════════════════════════════════════════ */ --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --text-xs: clamp(0.75rem, 0.7vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85vw, 0.9375rem); --text-base: clamp(0.9375rem, 0.95vw, 1.0625rem); --text-lg: clamp(1.0625rem, 1.1vw, 1.1875rem); --text-xl: clamp(1.1875rem, 1.3vw, 1.375rem); --text-2xl: clamp(1.5rem, 1.8vw, 1.875rem); --text-3xl: clamp(1.875rem, 2.5vw, 2.5rem); --text-4xl: clamp(2.25rem, 3.4vw, 3.25rem); --text-5xl: clamp(2.75rem, 4.5vw, 4.25rem); --text-6xl: clamp(3.25rem, 6vw, 5.5rem); --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.1em; --tracking-widest: 0.22em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ═══════════════════════════════════════════ SPACING (8px grid) ═══════════════════════════════════════════ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --section-padding: clamp(4rem, 9vw, 8.5rem); /* ═══════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════ */ --container-sm: 640px; --container-md: 820px; --container-lg: 1080px; --container-xl: 1240px; --container-2xl: 1440px; --container-padding: clamp(1.25rem, 4vw, 2.5rem); /* ═══════════════════════════════════════════ BORDERS & RADIUS ═══════════════════════════════════════════ */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px; /* ═══════════════════════════════════════════ SHADOWS (warm-tinted) ═══════════════════════════════════════════ */ --shadow-xs: 0 1px 2px hsla(24, 30%, 14%, 0.04); --shadow-sm: 0 1px 3px hsla(24, 30%, 14%, 0.07), 0 1px 2px hsla(24, 30%, 14%, 0.05); --shadow-md: 0 6px 16px hsla(24, 30%, 14%, 0.08), 0 2px 4px hsla(24, 30%, 14%, 0.05); --shadow-lg: 0 14px 32px hsla(24, 30%, 14%, 0.1), 0 4px 8px hsla(24, 30%, 14%, 0.05); --shadow-xl: 0 28px 60px hsla(24, 30%, 14%, 0.15), 0 10px 20px hsla(24, 30%, 14%, 0.06); --shadow-glow-amber: 0 0 0 4px hsla(40, 98%, 50%, 0.15); --shadow-glow-forest: 0 0 0 4px hsla(134, 46%, 17%, 0.12); /* ═══════════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════════ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 160ms; --duration-normal: 280ms; --duration-slow: 480ms; --duration-slower: 800ms; /* Z-INDEX */ --z-default: 0; --z-raised: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 500; --z-max: 9999; }