/* ========================================================= Pizza Hänger — Design Tokens ========================================================= Single source of truth for color, spacing, type, radii, shadows, motion & layout. To change the LOOK of the site, edit values in THIS file only — style.css should never contain a literal hex color again (rgba() is fine, but only built from the *-rgb primitives below, never a new triplet). Sections: Color Primitives → Semantic Colors → Spacing → Typography → Radii → Shadows → Transitions → Layout ========================================================= */ :root { /* --------------------------------------------------------- 1. Color primitives Brand hues as hex + an "-rgb" triplet twin. The triplet lets style.css build any alpha variant via rgba(var(--ph-x-rgb), ) instead of hardcoding a new hex/rgba literal. --------------------------------------------------------- */ --ph-cream: #FAF3E7; --ph-cream-rgb: 250, 243, 231; --ph-cream-dark: #F1E5D0; --ph-red: #C8402A; --ph-red-rgb: 200, 64, 42; --ph-red-dark: #A83420; --ph-green: #3E7C4F; --ph-green-rgb: 62, 124, 79; --ph-green-dark: #2E5E3B; --ph-charcoal: #2B2320; --ph-charcoal-rgb: 43, 35, 32; --ph-orange: #E8842C; --ph-orange-rgb: 232, 132, 44; --ph-white: #FFFFFF; --ph-white-rgb: 255, 255, 255; --ph-black-rgb: 0, 0, 0; /* Hero-only scrim/gradient browns — darker & warmer than charcoal, used exclusively for the hero image treatment. */ --ph-ember: #7A2417; --ph-umber-rgb: 43, 20, 15; --ph-umber-dark-rgb: 28, 16, 12; /* Muted running-text tones. Organic variance from the original design — kept as distinct primitives (not merged into one "muted" gray) so the refactor stays pixel-identical. */ --ph-text-lede: #52453F; /* section-lede */ --ph-text-caption: #6A5C53; /* fact-label */ --ph-text-soft: #5C4F47; /* step/menu copy */ --ph-text-legal: #4A3F38; /* legal copy */ /* --------------------------------------------------------- 2. Semantic color aliases Use these (not the primitives) inside style.css so intent stays readable and re-theming only touches section 1. --------------------------------------------------------- */ --color-bg: var(--ph-cream); --color-bg-alt: var(--ph-cream-dark); --color-surface: var(--ph-white); --color-surface-dark: var(--ph-charcoal); --color-surface-translucent: rgba(var(--ph-cream-rgb), 0.78); --color-text: var(--ph-charcoal); --color-text-inverse: var(--ph-cream); --color-text-lede: var(--ph-text-lede); --color-text-caption: var(--ph-text-caption); --color-text-soft: var(--ph-text-soft); --color-text-legal: var(--ph-text-legal); --color-accent: var(--ph-red); --color-accent-hover: var(--ph-red-dark); --color-accent-border: rgba(var(--ph-red-rgb), 0.25); --color-accent-focus-ring: rgba(var(--ph-red-rgb), 0.15); --color-secondary: var(--ph-green); --color-secondary-hover: var(--ph-green-dark); --color-highlight: var(--ph-orange); --color-highlight-soft-bg: rgba(var(--ph-orange-rgb), 0.12); --color-border: rgba(var(--ph-charcoal-rgb), 0.12); --color-border-soft: rgba(var(--ph-charcoal-rgb), 0.08); --color-border-strong: rgba(var(--ph-charcoal-rgb), 0.25); --color-border-input: rgba(var(--ph-charcoal-rgb), 0.18); --color-overlay-hover: rgba(var(--ph-charcoal-rgb), 0.06); --color-drop-shadow: rgba(var(--ph-black-rgb), 0.25); /* Text/borders/surfaces on dark backgrounds (footer, contact card) */ --color-inverse-border: rgba(var(--ph-cream-rgb), 0.15); --color-inverse-border-soft: rgba(var(--ph-cream-rgb), 0.25); --color-inverse-text-strong: rgba(var(--ph-cream-rgb), 0.85); --color-inverse-text-soft: rgba(var(--ph-cream-rgb), 0.7); --color-inverse-text-faint: rgba(var(--ph-cream-rgb), 0.6); /* Text/borders/surfaces on top of the hero photo */ --color-on-media: var(--ph-white); --color-on-media-strong: rgba(var(--ph-white-rgb), 0.9); --color-on-media-soft: rgba(var(--ph-white-rgb), 0.92); --color-on-media-faint: rgba(var(--ph-white-rgb), 0.6); --color-on-media-bg: rgba(var(--ph-white-rgb), 0.16); --color-on-media-border: rgba(var(--ph-white-rgb), 0.35); /* Hero-only gradient/scrim stops (see --ph-ember/--ph-umber-*) */ --color-hero-gradient: linear-gradient(135deg, var(--ph-ember) 0%, var(--ph-red) 45%, var(--ph-orange) 100%); --color-hero-scrim: linear-gradient( 180deg, rgba(var(--ph-umber-rgb), 0.55) 0%, rgba(var(--ph-umber-rgb), 0.35) 45%, rgba(var(--ph-umber-dark-rgb), 0.85) 100% ); /* --------------------------------------------------------- 3. Spacing scale (4/8px grid) Apply wherever a padding/margin/gap value lands within ±2px of a step. Values that don't land on the grid keep their organic rem value directly in style.css. --------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* --------------------------------------------------------- 4. Typography scale --------------------------------------------------------- */ --font-head: "Fraunces", "Georgia", serif; --font-body: "Inter", "Nunito Sans", -apple-system, sans-serif; --leading-tight: 1.1; /* headings */ --leading-normal: 1.6; /* body copy */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* Static sizes, ascending — named exactly where they map, each comment lists the original component so nothing drifts. */ --text-2xs: 0.8rem; /* eyebrow */ --text-xs: 0.85rem; /* pill badge, footer-bottom */ --text-sm: 0.88rem; /* fact-label, chip, form-field label */ --text-sm-alt: 0.9rem; /* legal-notice */ --text-base-sm: 0.92rem;/* menu-item copy, catering-note */ --text-base-md: 0.95rem;/* nav-links, step-card copy, footer-links */ --text-base-lg: 0.98rem;/* legal p/li */ --text-base: 1rem; /* body, buttons, form inputs */ --text-md: 1.1rem; /* section-lede */ --text-lg: 1.15rem; /* menu-item-head h3 */ --text-xl: 1.2rem; /* step-card h3 */ --text-2xl: 1.25rem; /* footer-logo */ --text-3xl: 1.3rem; /* logo, legal-main h2 */ /* Display sizes — large stat numerals & fallback icon */ --text-display-sm: 1.8rem; /* fact-number, price-tag */ --text-display-md: 2.6rem; /* step-number */ --text-display-lg: 3.5rem; /* img-fallback emoji */ /* Fluid (clamp) sizes for large, responsive headings */ --text-fluid-title: clamp(1.9rem, 3.2vw, 2.8rem); /* section-title */ --text-fluid-sub: clamp(1.05rem, 1.6vw, 1.3rem); /* hero-sub */ --text-fluid-legal-h1: clamp(1.8rem, 4vw, 2.6rem); /* legal-main h1 */ --text-hero: clamp(2.4rem, 6.5vw, 4.5rem); /* hero-title */ /* --------------------------------------------------------- 5. Radii --------------------------------------------------------- */ --radius-sm: 0.75rem; --radius-md: 1.25rem; --radius-lg: 2rem; --radius-xl: 2.5rem; --radius-pill: 999px; /* --------------------------------------------------------- 6. Shadows (warm charcoal tint, never cool gray) --------------------------------------------------------- */ --shadow-sm: 0 4px 14px -6px rgba(var(--ph-charcoal-rgb), 0.18); --shadow-md: 0 10px 30px -12px rgba(var(--ph-charcoal-rgb), 0.25); --shadow-lg: 0 20px 45px -15px rgba(var(--ph-charcoal-rgb), 0.35); /* --------------------------------------------------------- 7. Transitions --------------------------------------------------------- */ --transition-fast: 0.2s ease; --transition-base: 0.25s ease; --transition-slow: 0.3s ease; --transition-slower: 0.4s ease; --transition-reveal: 0.7s ease; /* scroll-reveal, intentionally slower */ /* --------------------------------------------------------- 8. Layout Breakpoints (documented, no CSS vars — media queries can't consume custom properties): 768px (tablet), 1024px (desktop) --------------------------------------------------------- */ --container-max: 1180px; --space-section: clamp(var(--space-8), 8vw, 7rem); }