/* ========================================================================== Design tokens — spacing, type, breakpoints, and 6 color schemes. Every template reads only these custom properties, never a hardcoded hex. Switch scheme by setting data-theme="" on . ========================================================================== */ :root { /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* Font sizes (mobile-first base, min 14px body) */ --fs-body: 15px; --fs-small: 13px; --fs-h1: clamp(1.75rem, 5vw + 1rem, 3.5rem); --fs-h2: clamp(1.25rem, 3vw + 1rem, 2rem); --fs-countdown-num: clamp(1.5rem, 6vw, 3rem); --fs-countdown-label: clamp(0.65rem, 2vw, 0.85rem); --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: var(--font-body); /* Breakpoints (referenced in comments only — CSS can't read these in media queries) */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* Motion */ --transition-fast: 150ms ease; --transition-base: 250ms ease; /* Shared, theme-independent */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.24); --focus-ring: 0 0 0 3px var(--color-accent-soft); } /* -------------------------------------------------------------------------- 1. Midnight Dark (default) — deep navy/blue, tech & SaaS, photography, music -------------------------------------------------------------------------- */ :root, [data-theme="midnight-dark"] { --color-bg: #0f172a; --color-bg-alt: #16213a; --color-surface: #1e293b; --color-surface-2: #273449; --color-border: #334155; --color-text: #f8fafc; --color-text-muted: #94a3b8; --color-accent: #3b82f6; --color-accent-hover: #2563eb; --color-accent-soft: rgba(59, 130, 246, 0.28); --color-on-accent: #ffffff; --color-success: #22c55e; --color-error: #ef4444; --gradient-hero: radial-gradient(circle at 30% 20%, #1e293b 0%, #0f172a 60%); } /* -------------------------------------------------------------------------- 2. Sunset Gradient — coral-to-orange, fitness, events, e-commerce -------------------------------------------------------------------------- */ [data-theme="sunset-gradient"] { --color-bg: #e8604f; --color-bg-alt: #ea6b4f; --color-surface: rgba(255, 255, 255, 0.14); --color-surface-2: rgba(255, 255, 255, 0.22); --color-border: rgba(255, 255, 255, 0.4); --color-text: #ffffff; --color-text-muted: rgba(255, 255, 255, 0.8); --color-accent: #ffffff; --color-accent-hover: #fff1e8; --color-accent-soft: rgba(255, 255, 255, 0.32); --color-on-accent: #d1442f; --color-success: #1a7f37; --color-error: #7f1d1d; --gradient-hero: linear-gradient(135deg, #ff6b6b 0%, #ffa36c 100%); } /* -------------------------------------------------------------------------- 3. Elegant Gold & Black — real estate, weddings, fashion -------------------------------------------------------------------------- */ [data-theme="elegant-gold"] { --color-bg: #111111; --color-bg-alt: #1a1a1a; --color-surface: #1c1c1c; --color-surface-2: #262626; --color-border: #3a3a3a; --color-text: #f5f5f5; --color-text-muted: #a3a3a3; --color-accent: #d4af37; --color-accent-hover: #c09a2e; --color-accent-soft: rgba(212, 175, 55, 0.25); --color-on-accent: #161200; --color-success: #4ade80; --color-error: #f87171; --gradient-hero: radial-gradient(circle at 30% 20%, #221c0d 0%, #111111 60%); } /* -------------------------------------------------------------------------- 4. Soft Pastel — beauty, weddings, nonprofit (light theme) -------------------------------------------------------------------------- */ [data-theme="soft-pastel"] { --color-bg: #fdf2f8; --color-bg-alt: #fce7f3; --color-surface: #ffffff; --color-surface-2: #fbcfe8; --color-border: #f9a8d4; --color-text: #1f2937; --color-text-muted: #4b5563; --color-accent: #f472b6; --color-accent-hover: #ec4899; --color-accent-soft: rgba(244, 114, 182, 0.25); --color-on-accent: #ffffff; --color-success: #16a34a; --color-error: #dc2626; --gradient-hero: radial-gradient(circle at 30% 20%, #fce7f3 0%, #fdf2f8 60%); } /* -------------------------------------------------------------------------- 5. Fresh Mint & Navy — digital marketing, education, startups -------------------------------------------------------------------------- */ [data-theme="fresh-mint"] { --color-bg: #0d3b3e; --color-bg-alt: #0f4649; --color-surface: #114548; --color-surface-2: #175256; --color-border: #1f6367; --color-text: #ecfdf5; --color-text-muted: #a7d9ce; --color-accent: #4ade80; --color-accent-hover: #22c55e; --color-accent-soft: rgba(74, 222, 128, 0.28); --color-on-accent: #04241b; --color-success: #4ade80; --color-error: #f87171; --gradient-hero: radial-gradient(circle at 30% 20%, #145458 0%, #0d3b3e 60%); } /* -------------------------------------------------------------------------- 6. Warm Café Tones — restaurants, photography, nonprofit -------------------------------------------------------------------------- */ [data-theme="warm-cafe"] { --color-bg: #3e2723; --color-bg-alt: #4a2f29; --color-surface: #4a312b; --color-surface-2: #5a3c34; --color-border: #6b473d; --color-text: #fff3e0; --color-text-muted: #d7b9a8; --color-accent: #d2a679; --color-accent-hover: #c4966a; --color-accent-soft: rgba(210, 166, 121, 0.28); --color-on-accent: #2a1712; --color-success: #8bc34a; --color-error: #e57373; --gradient-hero: radial-gradient(circle at 30% 20%, #4a2f29 0%, #3e2723 60%); }