/* ========================================================= PizzaHä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). Theme: Warmes Creme & Terrakotta — heller, freundlicher Look passend zum watercolor-pizza Logo (Bebas + Caveat). 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: #FAF4EB; --ph-cream-rgb: 250, 244, 235; --ph-sand: #F2E6D4; --ph-sand-rgb: 242, 230, 212; --ph-white: #FFFFFF; --ph-white-rgb: 255, 255, 255; --ph-charcoal: #2C221E; --ph-charcoal-rgb: 44, 34, 30; --ph-charcoal-muted: #6E5D53; --ph-charcoal-muted-rgb: 110, 93, 83; --ph-terracotta: #D94A2B; --ph-terracotta-rgb: 217, 74, 43; --ph-terracotta-hover: #BF3B1F; --ph-terracotta-hover-rgb: 191, 59, 31; --ph-green: #4A9B6E; --ph-green-rgb: 74, 155, 110; --ph-crust: #E8C39E; --ph-crust-rgb: 232, 195, 158; /* --------------------------------------------------------- 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-sand); --color-surface: var(--ph-white); --color-surface-dark: var(--ph-charcoal); --color-surface-translucent: rgba(var(--ph-cream-rgb), 0.92); --color-text: var(--ph-charcoal); --color-text-inverse: var(--ph-cream); --color-text-lede: var(--ph-charcoal-muted); --color-text-caption: var(--ph-charcoal-muted); --color-text-soft: var(--ph-charcoal-muted); --color-text-legal: var(--ph-charcoal-muted); --color-accent: var(--ph-terracotta); --color-accent-hover: var(--ph-terracotta-hover); --color-accent-border: rgba(var(--ph-terracotta-rgb), 0.25); --color-accent-focus-ring: rgba(var(--ph-terracotta-rgb), 0.18); /* White text passes WCAG AA (> 4.5:1) on the solid terracotta and green fills used across buttons and highlight banners. */ --color-on-accent: var(--ph-white); --color-secondary: var(--ph-green); --color-secondary-hover: var(--ph-green); --color-highlight: var(--ph-terracotta); --color-highlight-soft-bg: rgba(var(--ph-terracotta-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-charcoal-rgb), 0.35); /* Text/borders/surfaces on the darkest panels (footer, contact card) */ --color-inverse-border: rgba(var(--ph-cream-rgb), 0.18); --color-inverse-border-soft: rgba(var(--ph-cream-rgb), 0.35); --color-inverse-text-strong: rgba(var(--ph-white-rgb), 0.95); --color-inverse-text-soft: rgba(var(--ph-cream-rgb), 0.82); --color-inverse-text-faint: rgba(var(--ph-cream-rgb), 0.65); /* 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 — warm charcoal→terracotta tones so the white hero text stays readable over any photo. */ --color-hero-gradient: linear-gradient(135deg, var(--ph-charcoal) 0%, var(--ph-terracotta) 55%, var(--ph-terracotta-hover) 100%); --color-hero-scrim: linear-gradient( 180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.8) 100% ); /* Zusätzlicher seitlicher Schutz für die Text-Spalte links */ --color-hero-scrim-side: linear-gradient( 90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.4) 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: "Bebas Neue", "Arial Narrow", sans-serif; --font-body: "Inter", "Nunito Sans", -apple-system, sans-serif; --font-script: "Caveat", "Segoe Script", cursive; --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 */ --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 (soft warm charcoal tint — reads naturally against the cream/white light theme, no true black) --------------------------------------------------------- */ --shadow-sm: 0 4px 14px -6px rgba(var(--ph-charcoal-rgb), 0.08); --shadow-md: 0 10px 30px -12px rgba(var(--ph-charcoal-rgb), 0.12); --shadow-lg: 0 20px 45px -15px rgba(var(--ph-charcoal-rgb), 0.15); /* --------------------------------------------------------- 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); }