/* * Keylink Builder — Design Tokens * * Brand color is set dynamically via inline style on . * Mood-specific overrides are applied via body class: .kit-mood-{slug} */ :root { /* Brand — overridden per-site via inline style */ --kit-brand-color: #3B82F6; --kit-brand-color-rgb: 59, 130, 246; /* Neutral palette */ --kit-bg-white: #FFFFFF; --kit-bg-light: #F5F5F5; --kit-bg-dark: #1A1A2E; --kit-text-dark: #1A1A1A; --kit-text-muted: #6B7280; --kit-text-light: #F9FAFB; --kit-border: #E5E7EB; /* Typography — defaults (overridden by mood) */ --kit-font-heading: 'Inter', sans-serif; --kit-font-body: 'Inter', sans-serif; --kit-font-size-base: 1rem; --kit-line-height: 1.65; /* Type scale */ --kit-text-xs: 0.75rem; --kit-text-sm: 0.875rem; --kit-text-base: 1rem; --kit-text-lg: 1.125rem; --kit-text-xl: 1.25rem; --kit-text-2xl: 1.5rem; --kit-text-3xl: 1.875rem; --kit-text-4xl: 2.25rem; --kit-text-5xl: 3rem; --kit-text-6xl: 3.75rem; /* Spacing rhythm */ --kit-space-xs: 0.5rem; --kit-space-sm: 1rem; --kit-space-md: 1.5rem; --kit-space-lg: 2.5rem; --kit-space-xl: 4rem; --kit-space-2xl: 6rem; --kit-space-3xl: 8rem; /* Section spacing */ --kit-section-padding-tight: 3rem 0; --kit-section-padding-comfortable: 5rem 0; --kit-section-padding-spacious: 8rem 0; /* Layout */ --kit-container-width: 1200px; --kit-container-padding: 1.5rem; /* Shape & depth */ --kit-radius: 6px; --kit-radius-lg: 12px; --kit-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); --kit-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08); /* Transitions */ --kit-transition: 200ms ease; --kit-transition-fast: 100ms ease; } /* ─── Mood: Warm & Welcoming ─── */ .kit-mood-warm-welcoming { --kit-font-heading: 'Georgia', serif; --kit-font-body: 'Source Sans 3', sans-serif; --kit-radius: 12px; --kit-radius-lg: 20px; --kit-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); --kit-line-height: 1.75; --kit-section-padding-comfortable: 5.5rem 0; --kit-section-padding-spacious: 9rem 0; } /* ─── Mood: Clean & Professional ─── */ .kit-mood-clean-professional { --kit-font-heading: 'Inter', sans-serif; --kit-font-body: 'Inter', sans-serif; --kit-radius: 6px; --kit-radius-lg: 10px; --kit-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); --kit-line-height: 1.65; } /* ─── Mood: Bold & Modern ─── */ .kit-mood-bold-modern { --kit-font-heading: 'Space Grotesk', sans-serif; --kit-font-body: 'DM Sans', sans-serif; --kit-radius: 4px; --kit-radius-lg: 6px; --kit-shadow: none; --kit-line-height: 1.55; --kit-section-padding-tight: 2.5rem 0; --kit-section-padding-comfortable: 4rem 0; } /* ─── Mood: Soft & Creative ─── */ .kit-mood-soft-creative { --kit-font-heading: 'Playfair Display', serif; --kit-font-body: 'Nunito', sans-serif; --kit-radius: 16px; --kit-radius-lg: 24px; --kit-shadow: 0 6px 30px rgba(0, 0, 0, 0.05); --kit-line-height: 1.8; --kit-section-padding-comfortable: 6rem 0; --kit-section-padding-spacious: 10rem 0; }