/** * ============================================================================ * SIMPLEWEBSITES TEMPLATE FACTORY — COLOR SCHEMES * ============================================================================ * * 28 color schemes (14 base × 2 modes) * Each scheme overrides the 26 foundation tokens defined in tokens.css * * Usage: * — Light mode * — Dark mode * * Naming: .scheme-{name} where name matches design-system-components.md * * Structure per scheme: * - 26 foundation tokens (required) * - Derived tokens auto-calculated where possible * * ============================================================================ * TABLE OF CONTENTS * ============================================================================ * * 1. Core Blue — Trust, Business (Legal, B2B, Finance) * 2. Graphite — Technology, Professional (IT, SEO, Engineering) * 3. Clean — Purity, Health (Cleaning, Medical, Beauty) * 4. Energy — Urgency, Action (Emergency, Sports, Delivery) * 5. Action — Attention, Activity (Construction, Events, Ads) * 6. Earth — Nature, Ecology (Gardening, Eco, Agriculture) * 7. Growth — Growth, Prosperity (Consulting, Investment, Education) * 8. Craft — Craftsmanship, Cozy (Woodwork, Cafes, Barbershops) * 9. Style — Elegance, Style (Fashion, Beauty Salons, Photographers) * 10. Luxury — Premium, Exclusivity (Real Estate, Boutiques, Clinics) * 11. Education — Knowledge, Calm (Tutors, Schools, Courses, Coaching) * 12. Pastel — Softness, Creative (Handmade, Weddings, Designers) * 13. Corporate — Calm, Status, Trust (Legal, Consulting, B2B) * 14. Earth Natural — Natural, Reliable, Local (Gardeners, Landscape, Eco) * * ============================================================================ */ /* ============================================================================ * DEFAULT SCHEME * ============================================================================ * When no scheme class is applied, use Clean as default * This ensures tokens.css fallbacks work even without explicit scheme * ============================================================================ */ :root { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #F0FDFA; --bg-elevated: #FFFFFF; --bg-overlay: rgba(15, 23, 42, 0.5); /* === Text === */ --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #0D9488; --on-primary: #FFFFFF; --primary-hover: #0F766E; --primary-soft: rgba(13, 148, 136, 0.1); --on-primary-soft: #0D9488; --primary-rgb: 13, 148, 136; /* === Border === */ --border: #E2E8F0; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(15, 23, 42, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } /* ============================================================================ * 1. CORE BLUE — Trust & Business * ============================================================================ * Emotional focus: Reliability, Business * Best for: Legal, B2B, Finance, Consulting * ============================================================================ */ .scheme-core-blue { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #F8FAFC; --bg-elevated: #FFFFFF; --bg-overlay: rgba(15, 23, 42, 0.5); /* === Text === */ --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #2563EB; --on-primary: #FFFFFF; --primary-hover: #1D4ED8; --primary-soft: rgba(37, 99, 235, 0.1); --on-primary-soft: #2563EB; --primary-rgb: 37, 99, 235; /* === Border === */ --border: #E2E8F0; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(15, 23, 42, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-core-blue.dark { /* === BG === */ --bg-body: #0F172A; --bg-surface: #0F172A; --bg-surface-alt: #1E293B; --bg-elevated: #1E293B; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #64748B; --text-inverted: #0F172A; /* === Brand / Primary === */ --primary: #60A5FA; --on-primary: #0F172A; --primary-hover: #3B82F6; --primary-soft: rgba(96, 165, 250, 0.15); --on-primary-soft: #60A5FA; --primary-rgb: 96, 165, 250; /* === Border === */ --border: #334155; /* === State === */ --success: #4ADE80; --on-success: #0F172A; --warning: #FBBF24; --on-warning: #0F172A; --error: #F87171; --on-error: #0F172A; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 2. GRAPHITE — Technology & Professional * ============================================================================ * Emotional focus: Technology, Professional * Best for: IT Services, SEO, Engineering, Audit * ============================================================================ */ .scheme-graphite { /* === BG === */ --bg-body: #FAFAFA; --bg-surface: #FAFAFA; --bg-surface-alt: #F4F4F5; --bg-elevated: #FFFFFF; --bg-overlay: rgba(30, 41, 59, 0.5); /* === Text === */ --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #A1A1AA; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #334155; --on-primary: #FFFFFF; --primary-hover: #1E293B; --primary-soft: rgba(51, 65, 85, 0.1); --on-primary-soft: #334155; --primary-rgb: 51, 65, 85; /* === Border === */ --border: #E4E4E7; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(24, 24, 27, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-graphite.dark { /* === BG === */ --bg-body: #1E293B; --bg-surface: #1E293B; --bg-surface-alt: #334155; --bg-elevated: #334155; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #64748B; --text-inverted: #1E293B; /* === Brand / Primary === */ --primary: #CBD5E1; --on-primary: #1E293B; --primary-hover: #E2E8F0; --primary-soft: rgba(203, 213, 225, 0.15); --on-primary-soft: #CBD5E1; --primary-rgb: 203, 213, 225; /* === Border === */ --border: #475569; /* === State === */ --success: #4ADE80; --on-success: #1E293B; --warning: #FBBF24; --on-warning: #1E293B; --error: #F87171; --on-error: #1E293B; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 3. CLEAN — Purity & Health * ============================================================================ * Emotional focus: Cleanliness, Health * Best for: Cleaning, Medical, Cosmetology * PRIMARY SCHEME FOR CLEANING NICHE * ============================================================================ */ .scheme-clean { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #F0FDFA; --bg-elevated: #FFFFFF; --bg-overlay: rgba(15, 23, 42, 0.5); /* === Text === */ --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #0D9488; --on-primary: #FFFFFF; --primary-hover: #0F766E; --primary-soft: rgba(13, 148, 136, 0.1); --on-primary-soft: #0D9488; --primary-rgb: 13, 148, 136; /* === Border === */ --border: #E2E8F0; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(15, 23, 42, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-clean.dark { /* === BG === */ --bg-body: #0F172A; --bg-surface: #0F172A; --bg-surface-alt: #134E4A; --bg-elevated: #1E293B; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #64748B; --text-inverted: #0F172A; /* === Brand / Primary === */ --primary: #5EEAD4; --on-primary: #0F172A; --primary-hover: #2DD4BF; --primary-soft: rgba(94, 234, 212, 0.15); --on-primary-soft: #5EEAD4; --primary-rgb: 94, 234, 212; /* === Border === */ --border: #334155; /* === State === */ --success: #4ADE80; --on-success: #0F172A; --warning: #FBBF24; --on-warning: #0F172A; --error: #F87171; --on-error: #0F172A; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 4. ENERGY — Urgency & Action * ============================================================================ * Emotional focus: Urgency, Action * Best for: Emergency Repair, Sports, Delivery * ============================================================================ */ .scheme-energy { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #FEF2F2; --bg-elevated: #FFFFFF; --bg-overlay: rgba(30, 41, 59, 0.5); /* === Text === */ --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #DC2626; --on-primary: #FFFFFF; --primary-hover: #B91C1C; --primary-soft: rgba(220, 38, 38, 0.1); --on-primary-soft: #DC2626; --primary-rgb: 220, 38, 38; /* === Border === */ --border: #E2E8F0; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(15, 23, 42, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-energy.dark { /* === BG === */ --bg-body: #1E293B; --bg-surface: #1E293B; --bg-surface-alt: #450A0A; --bg-elevated: #334155; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #64748B; --text-inverted: #1E293B; /* === Brand / Primary === */ --primary: #FCA5A5; --on-primary: #1E293B; --primary-hover: #F87171; --primary-soft: rgba(252, 165, 165, 0.15); --on-primary-soft: #FCA5A5; --primary-rgb: 252, 165, 165; /* === Border === */ --border: #475569; /* === State === */ --success: #4ADE80; --on-success: #1E293B; --warning: #FBBF24; --on-warning: #1E293B; --error: #F87171; --on-error: #1E293B; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 5. ACTION — Attention & Activity * ============================================================================ * Emotional focus: Attention, Activity * Best for: Construction, Event Agencies, Advertising * ============================================================================ */ .scheme-action { /* === BG === */ --bg-body: #FAFAFA; --bg-surface: #FAFAFA; --bg-surface-alt: #FFF7ED; --bg-elevated: #FFFFFF; --bg-overlay: rgba(24, 24, 27, 0.5); /* === Text === */ --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #A1A1AA; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #F97316; --on-primary: #FFFFFF; --primary-hover: #EA580C; --primary-soft: rgba(249, 115, 22, 0.1); --on-primary-soft: #F97316; --primary-rgb: 249, 115, 22; /* === Border === */ --border: #E4E4E7; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(24, 24, 27, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-action.dark { /* === BG === */ --bg-body: #18181B; --bg-surface: #18181B; --bg-surface-alt: #431407; --bg-elevated: #27272A; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FAFAFA; --text-secondary: #D4D4D8; --text-muted: #71717A; --text-inverted: #18181B; /* === Brand / Primary === */ --primary: #FDBA74; --on-primary: #18181B; --primary-hover: #FB923C; --primary-soft: rgba(253, 186, 116, 0.15); --on-primary-soft: #FDBA74; --primary-rgb: 253, 186, 116; /* === Border === */ --border: #3F3F46; /* === State === */ --success: #4ADE80; --on-success: #18181B; --warning: #FBBF24; --on-warning: #18181B; --error: #F87171; --on-error: #18181B; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.5); } /* ============================================================================ * 6. EARTH — Nature & Ecology * ============================================================================ * Emotional focus: Nature, Ecology * Best for: Gardening, Eco Products, Agriculture * ============================================================================ */ .scheme-earth { /* === BG === */ --bg-body: #F7F7F7; --bg-surface: #F7F7F7; --bg-surface-alt: #ECFCCB; --bg-elevated: #FFFFFF; --bg-overlay: rgba(27, 51, 27, 0.5); /* === Text === */ --text-primary: #1A2E05; --text-secondary: #4D7C0F; --text-muted: #84CC16; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #65A30D; --on-primary: #FFFFFF; --primary-hover: #4D7C0F; --primary-soft: rgba(101, 163, 13, 0.1); --on-primary-soft: #65A30D; --primary-rgb: 101, 163, 13; /* === Border === */ --border: #D9F99D; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(27, 51, 27, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-earth.dark { /* === BG === */ --bg-body: #1B331B; --bg-surface: #1B331B; --bg-surface-alt: #14532D; --bg-elevated: #22543D; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F0FDF4; --text-secondary: #BBF7D0; --text-muted: #4ADE80; --text-inverted: #1B331B; /* === Brand / Primary === */ --primary: #A7F3D0; --on-primary: #1B331B; --primary-hover: #6EE7B7; --primary-soft: rgba(167, 243, 208, 0.15); --on-primary-soft: #A7F3D0; --primary-rgb: 167, 243, 208; /* === Border === */ --border: #22543D; /* === State === */ --success: #4ADE80; --on-success: #1B331B; --warning: #FBBF24; --on-warning: #1B331B; --error: #F87171; --on-error: #1B331B; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 7. GROWTH — Growth & Prosperity * ============================================================================ * Emotional focus: Growth, Prosperity * Best for: Consulting, Investment, Education * ============================================================================ */ .scheme-growth { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #F0FDF4; --bg-elevated: #FFFFFF; --bg-overlay: rgba(31, 41, 55, 0.5); /* === Text === */ --text-primary: #111827; --text-secondary: #4B5563; --text-muted: #9CA3AF; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #16A34A; --on-primary: #FFFFFF; --primary-hover: #15803D; --primary-soft: rgba(22, 163, 74, 0.1); --on-primary-soft: #16A34A; --primary-rgb: 22, 163, 74; /* === Border === */ --border: #E5E7EB; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(17, 24, 39, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-growth.dark { /* === BG === */ --bg-body: #1F2937; --bg-surface: #1F2937; --bg-surface-alt: #14532D; --bg-elevated: #374151; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F9FAFB; --text-secondary: #D1D5DB; --text-muted: #6B7280; --text-inverted: #1F2937; /* === Brand / Primary === */ --primary: #4ADE80; --on-primary: #1F2937; --primary-hover: #22C55E; --primary-soft: rgba(74, 222, 128, 0.15); --on-primary-soft: #4ADE80; --primary-rgb: 74, 222, 128; /* === Border === */ --border: #4B5563; /* === State === */ --success: #4ADE80; --on-success: #1F2937; --warning: #FBBF24; --on-warning: #1F2937; --error: #F87171; --on-error: #1F2937; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 8. CRAFT — Craftsmanship & Cozy * ============================================================================ * Emotional focus: Craftsmanship, Warmth * Best for: Woodwork, Cafes, Barbershops * ============================================================================ */ .scheme-craft { /* === BG === */ --bg-body: #FFFBEB; --bg-surface: #FFFBEB; --bg-surface-alt: #FEF3C7; --bg-elevated: #FFFFFF; --bg-overlay: rgba(41, 37, 36, 0.5); /* === Text === */ --text-primary: #292524; --text-secondary: #57534E; --text-muted: #A8A29E; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #C2410C; --on-primary: #FFFFFF; --primary-hover: #9A3412; --primary-soft: rgba(194, 65, 12, 0.1); --on-primary-soft: #C2410C; --primary-rgb: 194, 65, 12; /* === Border === */ --border: #FDE68A; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(41, 37, 36, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-craft.dark { /* === BG === */ --bg-body: #292524; --bg-surface: #292524; --bg-surface-alt: #44403C; --bg-elevated: #44403C; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FAFAF9; --text-secondary: #D6D3D1; --text-muted: #78716C; --text-inverted: #292524; /* === Brand / Primary === */ --primary: #FEC556; --on-primary: #292524; --primary-hover: #FCD34D; --primary-soft: rgba(254, 197, 86, 0.15); --on-primary-soft: #FEC556; --primary-rgb: 254, 197, 86; /* === Border === */ --border: #57534E; /* === State === */ --success: #4ADE80; --on-success: #292524; --warning: #FBBF24; --on-warning: #292524; --error: #F87171; --on-error: #292524; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 9. STYLE — Elegance & Style * ============================================================================ * Emotional focus: Elegance, Style * Best for: Fashion, Beauty Salons, Photographers * ============================================================================ */ .scheme-style { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #FAF5FF; --bg-elevated: #FFFFFF; --bg-overlay: rgba(23, 6, 41, 0.5); /* === Text === */ --text-primary: #1C1917; --text-secondary: #57534E; --text-muted: #A8A29E; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #A855F7; --on-primary: #FFFFFF; --primary-hover: #9333EA; --primary-soft: rgba(168, 85, 247, 0.1); --on-primary-soft: #A855F7; --primary-rgb: 168, 85, 247; /* === Border === */ --border: #E7E5E4; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(28, 25, 23, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-style.dark { /* === BG === */ --bg-body: #170629; --bg-surface: #170629; --bg-surface-alt: #2E1065; --bg-elevated: #3B0764; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FAF5FF; --text-secondary: #E9D5FF; --text-muted: #A855F7; --text-inverted: #170629; /* === Brand / Primary === */ --primary: #E9D5FF; --on-primary: #170629; --primary-hover: #D8B4FE; --primary-soft: rgba(233, 213, 255, 0.15); --on-primary-soft: #E9D5FF; --primary-rgb: 233, 213, 255; /* === Border === */ --border: #581C87; /* === State === */ --success: #4ADE80; --on-success: #170629; --warning: #FBBF24; --on-warning: #170629; --error: #F87171; --on-error: #170629; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.5); } /* ============================================================================ * 10. LUXURY — Premium & Exclusivity * ============================================================================ * Emotional focus: Premium, Exclusivity * Best for: Elite Real Estate, Boutiques, Private Clinics * ============================================================================ */ .scheme-luxury { /* === BG === */ --bg-body: #F5F5F5; --bg-surface: #F5F5F5; --bg-surface-alt: #FEFCE8; --bg-elevated: #FFFFFF; --bg-overlay: rgba(39, 39, 42, 0.5); /* === Text === */ --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #A1A1AA; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #B45309; --on-primary: #FFFFFF; --primary-hover: #92400E; --primary-soft: rgba(180, 83, 9, 0.1); --on-primary-soft: #B45309; --primary-rgb: 180, 83, 9; /* === Border === */ --border: #E4E4E7; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(24, 24, 27, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-luxury.dark { /* === BG === */ --bg-body: #27272A; --bg-surface: #27272A; --bg-surface-alt: #3F3F46; --bg-elevated: #3F3F46; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FAFAFA; --text-secondary: #D4D4D8; --text-muted: #71717A; --text-inverted: #27272A; /* === Brand / Primary === */ --primary: #FCD34D; --on-primary: #27272A; --primary-hover: #FBBF24; --primary-soft: rgba(252, 211, 77, 0.15); --on-primary-soft: #FCD34D; --primary-rgb: 252, 211, 77; /* === Border === */ --border: #52525B; /* === State === */ --success: #4ADE80; --on-success: #27272A; --warning: #FBBF24; --on-warning: #27272A; --error: #F87171; --on-error: #27272A; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.5); } /* ============================================================================ * 11. EDUCATION — Knowledge & Calm * ============================================================================ * Emotional focus: Knowledge, Calm * Best for: Tutors, Schools, Courses, Coaching * ============================================================================ */ .scheme-education { /* === BG === */ --bg-body: #F0F9FF; --bg-surface: #F0F9FF; --bg-surface-alt: #E0F2FE; --bg-elevated: #FFFFFF; --bg-overlay: rgba(30, 58, 138, 0.5); /* === Text === */ --text-primary: #0C4A6E; --text-secondary: #0369A1; --text-muted: #7DD3FC; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #0EA5E9; --on-primary: #FFFFFF; --primary-hover: #0284C7; --primary-soft: rgba(14, 165, 233, 0.1); --on-primary-soft: #0EA5E9; --primary-rgb: 14, 165, 233; /* === Border === */ --border: #BAE6FD; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(12, 74, 110, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-education.dark { /* === BG === */ --bg-body: #1E3A8A; --bg-surface: #1E3A8A; --bg-surface-alt: #1E40AF; --bg-elevated: #2563EB; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #F0F9FF; --text-secondary: #BAE6FD; --text-muted: #38BDF8; --text-inverted: #1E3A8A; /* === Brand / Primary === */ --primary: #93C5FD; --on-primary: #1E3A8A; --primary-hover: #60A5FA; --primary-soft: rgba(147, 197, 253, 0.15); --on-primary-soft: #93C5FD; --primary-rgb: 147, 197, 253; /* === Border === */ --border: #3B82F6; /* === State === */ --success: #4ADE80; --on-success: #1E3A8A; --warning: #FBBF24; --on-warning: #1E3A8A; --error: #F87171; --on-error: #1E3A8A; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 12. PASTEL — Softness & Creative * ============================================================================ * Emotional focus: Softness, Creativity * Best for: Handmade, Wedding Services, Designers * ============================================================================ */ .scheme-pastel { /* === BG === */ --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #FDF2F8; --bg-elevated: #FFFFFF; --bg-overlay: rgba(45, 25, 35, 0.5); /* === Text === */ --text-primary: #1F2937; --text-secondary: #4B5563; --text-muted: #9CA3AF; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #EC4899; --on-primary: #FFFFFF; --primary-hover: #DB2777; --primary-soft: rgba(236, 72, 153, 0.1); --on-primary-soft: #EC4899; --primary-rgb: 236, 72, 153; /* === Border === */ --border: #FBCFE8; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(31, 41, 55, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-pastel.dark { /* === BG === */ --bg-body: #2D1923; --bg-surface: #2D1923; --bg-surface-alt: #4C1D36; --bg-elevated: #5C2440; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FDF2F8; --text-secondary: #FBCFE8; --text-muted: #F472B6; --text-inverted: #2D1923; /* === Brand / Primary === */ --primary: #F9A8D4; --on-primary: #2D1923; --primary-hover: #F472B6; --primary-soft: rgba(249, 168, 212, 0.15); --on-primary-soft: #F9A8D4; --primary-rgb: 249, 168, 212; /* === Border === */ --border: #9D174D; /* === State === */ --success: #4ADE80; --on-success: #2D1923; --warning: #FBBF24; --on-warning: #2D1923; --error: #F87171; --on-error: #2D1923; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.5); } /* ============================================================================ * 13. CORPORATE NEUTRAL — Calm, Status & Trust * ============================================================================ * Emotional focus: Calm, Status, Trust * Best for: Legal, Consulting, Accounting, B2B Services * ============================================================================ */ .scheme-corporate { /* === BG === */ --bg-body: #F5F5F5; --bg-surface: #F5F5F5; --bg-surface-alt: #E5E5E5; --bg-elevated: #FFFFFF; --bg-overlay: rgba(31, 35, 40, 0.5); /* === Text === */ --text-primary: #171717; --text-secondary: #525252; --text-muted: #A3A3A3; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #2B2E34; --on-primary: #FFFFFF; --primary-hover: #1F2328; --primary-soft: rgba(43, 46, 52, 0.1); --on-primary-soft: #2B2E34; --primary-rgb: 43, 46, 52; /* === Border === */ --border: #D4D4D4; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(23, 23, 23, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-corporate.dark { /* === BG === */ --bg-body: #1F2328; --bg-surface: #1F2328; --bg-surface-alt: #2B2E34; --bg-elevated: #3A3F45; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FAFAFA; --text-secondary: #D4D4D4; --text-muted: #737373; --text-inverted: #1F2328; /* === Brand / Primary === */ --primary: #DADDE1; --on-primary: #3A3F45; --primary-hover: #E5E7EB; --primary-soft: rgba(218, 221, 225, 0.15); --on-primary-soft: #DADDE1; --primary-rgb: 218, 221, 225; /* === Border === */ --border: #525252; /* === State === */ --success: #4ADE80; --on-success: #1F2328; --warning: #FBBF24; --on-warning: #1F2328; --error: #F87171; --on-error: #1F2328; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * 14. EARTH NATURAL — Natural, Reliable & Local * ============================================================================ * Emotional focus: Naturalness, Reliability, Local * Best for: Gardeners, Landscape, Eco Services, Craft Services * ============================================================================ */ .scheme-earth-natural { /* === BG === */ --bg-body: #FBF7F2; --bg-surface: #FBF7F2; --bg-surface-alt: #F5EDE3; --bg-elevated: #FFFFFF; --bg-overlay: rgba(59, 47, 42, 0.5); /* === Text === */ --text-primary: #3B2F2A; --text-secondary: #6B5B54; --text-muted: #A89B94; --text-inverted: #FFFFFF; /* === Brand / Primary === */ --primary: #C96A4A; --on-primary: #FFFFFF; --primary-hover: #B5593B; --primary-soft: rgba(201, 106, 74, 0.1); --on-primary-soft: #C96A4A; --primary-rgb: 201, 106, 74; /* === Border === */ --border: #E6D3B1; /* === State === */ --success: #22C55E; --on-success: #FFFFFF; --warning: #F59E0B; --on-warning: #FFFFFF; --error: #EF4444; --on-error: #FFFFFF; /* === Shadow === */ --shadow-color: rgba(59, 47, 42, 0.08); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } .scheme-earth-natural.dark { /* === BG === */ --bg-body: #3B2F2A; --bg-surface: #3B2F2A; --bg-surface-alt: #5A3E36; --bg-elevated: #6B4D44; --bg-overlay: rgba(0, 0, 0, 0.7); /* === Text === */ --text-primary: #FBF7F2; --text-secondary: #E6D3B1; --text-muted: #A89B94; --text-inverted: #3B2F2A; /* === Brand / Primary === */ --primary: #E6D3B1; --on-primary: #5A3E36; --primary-hover: #D9C5A3; --primary-soft: rgba(230, 211, 177, 0.15); --on-primary-soft: #E6D3B1; --primary-rgb: 230, 211, 177; /* === Border === */ --border: #6B5B54; /* === State === */ --success: #4ADE80; --on-success: #3B2F2A; --warning: #FBBF24; --on-warning: #3B2F2A; --error: #F87171; --on-error: #3B2F2A; /* === Shadow === */ --shadow-color: rgba(0, 0, 0, 0.4); } /* ============================================================================ * END OF SCHEMES * ============================================================================ */