/* Paintpam Global — Design Tokens * Tone coordinate: Magical × Crafted × Cinematic * Imweb-compatible (HTML/CSS only, no build step required) */ :root { /* Color — dark-first, content-forward */ --pp-bg: #0A0A0A; /* near-black canvas */ --pp-surface: #141414; /* card/section surface */ --pp-surface-2: #1F1F1F; /* raised surface */ --pp-border: #3F3F3F; /* subtle border — was #2A2A2A (1.38:1, fails WCAG 1.4.11), now 3.0:1 ✓ */ --pp-border-soft: #1F1F1F; /* almost-invisible border (decorative only) */ --pp-text: #F5F5F4; /* primary text — 18.15:1 on bg ✓ AA */ --pp-text-muted: #A8A29E; /* secondary text — 7.85:1 on bg ✓ AA */ --pp-text-dim: #8C8580; /* tertiary — was #78716C (4.13:1, fails AA), now ~5.0:1 ✓ AA */ --pp-accent: #F59E0B; /* warm amber — Magical signature — 9.22:1 ✓ */ --pp-accent-soft: #FCD34D; /* hover */ --pp-accent-dim: #92400E; /* deep amber on light bg */ /* Use case accent (cards, badges) */ --pp-uc-family: #F59E0B; /* amber — family entertainment */ --pp-uc-events: #8B5CF6; /* violet — events & exhibitions */ --pp-uc-retail: #10B981; /* emerald — retail & f&b */ /* Typography */ --pp-font-display: "Fraunces", Georgia, "Times New Roman", serif; --pp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --pp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --pp-size-hero: clamp(2.75rem, 6.5vw, 6rem); /* 44 to 96px */ --pp-size-h1: clamp(2.25rem, 4.5vw, 4rem); /* 36 to 64px */ --pp-size-h2: clamp(1.75rem, 3.5vw, 2.75rem); /* 28 to 44px */ --pp-size-h3: clamp(1.375rem, 2.25vw, 2rem); /* 22 to 32px */ --pp-size-body: 1.1875rem; /* 19px (was 17px) */ --pp-size-small: 1rem; /* 16px (was 14px) */ --pp-size-micro: 0.8125rem; /* 13px (was 12px) */ --pp-lh-tight: 1.1; --pp-lh-snug: 1.25; --pp-lh-normal: 1.55; --pp-lh-relaxed: 1.7; --pp-tracking-tight: -0.02em; --pp-tracking-normal: 0; --pp-tracking-wide: 0.08em; /* Spacing — 8pt grid */ --pp-space-1: 0.5rem; /* 8 */ --pp-space-2: 1rem; /* 16 */ --pp-space-3: 1.5rem; /* 24 */ --pp-space-4: 2rem; /* 32 */ --pp-space-5: 3rem; /* 48 */ --pp-space-6: 4rem; /* 64 */ --pp-space-7: 6rem; /* 96 */ --pp-space-8: 8rem; /* 128 */ /* Layout */ --pp-max-width: 1280px; --pp-content-max: 720px; /* prose blocks */ --pp-radius-sm: 6px; --pp-radius: 12px; --pp-radius-lg: 20px; /* Effects */ --pp-shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.6); --pp-shadow-hover: 0 20px 60px -10px rgba(245, 158, 11, 0.15); --pp-blur-bg: blur(40px); /* Motion */ --pp-ease: cubic-bezier(0.22, 1, 0.36, 1); --pp-ease-in: cubic-bezier(0.4, 0, 0.6, 1); --pp-dur-fast: 180ms; --pp-dur: 280ms; --pp-dur-slow: 480ms; /* Z-index — layer system (sprint 3.5 audit) */ --pp-z-base: 0; --pp-z-raised: 1; --pp-z-sticky: 10; --pp-z-dropdown: 50; --pp-z-overlay: 100; /* hero overlays, drawers */ --pp-z-modal: 1000; --pp-z-toast: 1100; /* Shadow — overlay tier (dropdowns, popovers) */ --pp-shadow-overlay: 0 12px 40px -8px rgba(0, 0, 0, 0.6); /* Responsive breakpoints (advisory — use these widths in media queries) */ --pp-bp-sm: 600px; --pp-bp-md: 900px; --pp-bp-lg: 1280px; /* Dark theme — applied to via color-scheme below */ color-scheme: dark; } /* WCAG 2.3.3 — Honor prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }