/** * Paripoorn Design Tokens * ------------------------------------------------------------------------ * Every value here can be overridden at runtime by inc/theme-settings.php, * which prints a `--pp-*` override block inline in based on saved * options. This file defines the *defaults* so the site never breaks if * settings haven't been saved yet. */ :root { /* Brand colors */ --pp-primary: #F20D16; --pp-primary-dark: #C90A12; --pp-secondary: #214D1D; --pp-accent: #D89B32; /* Backgrounds */ --pp-bg: #FFFFFF; --pp-bg-soft: #FBF4E3; --pp-bg-section: #F6EEDB; --pp-bg-card: #FFF9ED; --pp-bg-dark: #1B2B17; /* Text */ --pp-heading: #222222; --pp-text: #555555; --pp-muted: #8A8A8A; --pp-light-text: #FFFFFF; /* UI */ --pp-border: #E9E3D8; --pp-divider: #1B1C1C; --pp-input-bg: #FFFFFF; --pp-input-border: #DDD3BC; /* WooCommerce */ --pp-sale: #F20D16; --pp-price: #222222; --pp-discount: #F20D16; --pp-success: #3D7A45; --pp-out-of-stock: #8A8A8A; /* Typography */ --pp-font-heading: "Libre Caslon Text", Georgia, serif; --pp-font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; --pp-font-nav: var(--pp-font-body); --pp-font-button: var(--pp-font-body); --pp-font-product: var(--pp-font-heading); --pp-weight-heading: 400; --pp-weight-body: 400; --pp-weight-nav: 500; --pp-weight-button: 600; --pp-weight-label: 600; --pp-weight-price: 600; /* Fluid type scale */ --pp-fs-h1: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); --pp-fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); --pp-fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); --pp-fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --pp-fs-h5: 1.125rem; --pp-fs-h6: 1rem; --pp-fs-body: 1rem; --pp-fs-small: 0.875rem; --pp-fs-eyebrow: 0.8125rem; /* Spacing scale */ --pp-space-1: 4px; --pp-space-2: 8px; --pp-space-3: 12px; --pp-space-4: 16px; --pp-space-5: 20px; --pp-space-6: 24px; --pp-space-8: 32px; --pp-space-10: 40px; --pp-space-12: 48px; --pp-space-16: 64px; --pp-space-20: 80px; --pp-space-24: 96px; --pp-space-30: 120px; /* Container & gutters */ --pp-container: 1400px; --pp-gutter: 32px; --pp-gutter-tablet: 24px; --pp-gutter-mobile: 16px; /* Section rhythm */ --pp-section-space: var(--pp-space-24); --pp-section-space-tablet: var(--pp-space-16) + 8px; --pp-section-space-tablet: 72px; --pp-section-space-mobile: 56px; /* Radius */ --pp-radius-sm: 8px; --pp-radius-md: 14px; --pp-radius-lg: 20px; /* Motion */ --pp-transition: 250ms cubic-bezier(.2, .65, .3, 1); --pp-anim-duration: 600ms; --pp-anim-easing: cubic-bezier(.2, .65, .3, 1); --pp-anim-distance: 20px; /* Shadows (used sparingly — this is an editorial brand, not SaaS) */ --pp-shadow-sm: 0 2px 8px rgba(34, 34, 34, 0.06); --pp-shadow-md: 0 8px 24px rgba(34, 34, 34, 0.08); --pp-shadow-lg: 0 16px 40px rgba(34, 34, 34, 0.10); /* Header */ --pp-header-height: 88px; --pp-announcement-height: 40px; --pp-logo-width-desktop: 160px; --pp-logo-width-tablet: 140px; --pp-logo-width-mobile: 120px; } @media (max-width: 1023px) { :root { --pp-gutter: var(--pp-gutter-tablet); --pp-section-space: var(--pp-section-space-tablet); } } @media (max-width: 767px) { :root { --pp-gutter: var(--pp-gutter-mobile); --pp-section-space: var(--pp-section-space-mobile); --pp-header-height: 72px; } }