/* ======================================== THEME PRIMITIVES - Layer 1 Fixed CSS custom properties ======================================== */ :root { /* Spacing scale */ --p-space-1: 0.25rem; --p-space-2: 0.5rem; --p-space-3: 0.75rem; --p-space-4: 1rem; --p-space-6: 1.5rem; --p-space-8: 2rem; --p-space-12: 3rem; --p-space-16: 4rem; --p-space-24: 6rem; /* Border radius scale */ --p-radius-none: 0; --p-radius-sm: 0.25rem; --p-radius-md: 0.5rem; --p-radius-lg: 0.75rem; --p-radius-xl: 1rem; --p-radius-full: 9999px; /* Font families - Curated pairings based on research */ /* Sans-serif */ --p-font-inter: 'Inter', system-ui, sans-serif; --p-font-manrope: 'Manrope', system-ui, sans-serif; --p-font-work-sans: 'Work Sans', system-ui, sans-serif; --p-font-dm-sans: 'DM Sans', system-ui, sans-serif; --p-font-raleway: 'Raleway', system-ui, sans-serif; --p-font-space: 'Space Grotesk', system-ui, sans-serif; --p-font-outfit: 'Outfit', system-ui, sans-serif; /* Serif */ --p-font-fraunces: 'Fraunces', Georgia, serif; --p-font-cormorant: 'Cormorant Garamond', Georgia, serif; --p-font-playfair: 'Playfair Display', Georgia, serif; --p-font-source-serif: 'Source Serif 4', Georgia, serif; /* Major Third (1.25) Type Scale with line-heights and letter-spacing */ /* Body text: 1.5 line-height (WCAG compliant) */ --p-text-xs: 0.75rem; /* 12px */ --p-lh-xs: 1.5; --p-ls-xs: 0.02em; /* Wider for small text */ --p-text-sm: 0.875rem; /* 14px */ --p-lh-sm: 1.5; --p-ls-sm: 0.01em; --p-text-base: 1rem; /* 16px - browser default, accessible minimum */ --p-lh-base: 1.5; --p-ls-base: 0; --p-text-lg: 1.125rem; /* 18px */ --p-lh-lg: 1.5; --p-ls-lg: 0; /* Subheadings: 1.2-1.3 line-height */ --p-text-xl: 1.25rem; /* 20px = 16 × 1.25 */ --p-lh-xl: 1.35; --p-ls-xl: -0.01em; --p-text-2xl: 1.5rem; /* 24px = 20 × 1.25 */ --p-lh-2xl: 1.3; --p-ls-2xl: -0.01em; /* Headings: 1.1-1.2 line-height, tighter tracking */ --p-text-3xl: 1.875rem; /* 30px = 24 × 1.25 */ --p-lh-3xl: 1.2; --p-ls-3xl: -0.02em; --p-text-4xl: 2.25rem; /* 36px */ --p-lh-4xl: 1.15; --p-ls-4xl: -0.02em; --p-text-5xl: 3rem; /* 48px */ --p-lh-5xl: 1.1; --p-ls-5xl: -0.025em; /* Animation durations */ --p-duration-fast: 0.1s; --p-duration-normal: 0.2s; --p-duration-slow: 0.35s; /* Easing functions */ --p-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --p-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* Shadow base */ --p-shadow-color: 0 0% 0%; --p-shadow-strength: 0.06; }