/* ========================================================================= BiBooSync — Design Tokens CSS ========================================================================= La source de vérité pour tous les styles. Le thème actif est contrôlé via [data-theme] sur . Les valeurs HEX sont overridées en ligne via JS (theme-engine.js). ========================================================================= */ /* ── IMPORTS GOOGLE FONTS ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Fraunces:wght@400;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* ── VARIABLES COMMUNES (indépendantes du thème) ──────────────────────── */ :root { /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Border radius */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07); --shadow-xl: 0 20px 60px rgba(0,0,0,.15); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 600ms ease; /* Typography base */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Z-indices */ --z-below: -1; --z-base: 1; --z-above: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-chatbot: 500; /* Layout */ --container-max: 1200px; --section-py: 4rem; } /* ═══════════════════════════════════════════════════════════════════════════ TEMPLATE 1 — "L'Éveil Créatif" Crèches & Jardins d'enfants ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="eveil"] { --color-primary: #FF8A5B; --color-primary-dark: #e87344; --color-primary-light:#ffe0d2; --color-secondary: #45B69C; --color-secondary-dk: #389380; --color-accent: #FFD166; --color-bg: #FDFBF7; --color-bg-alt: #FFF5EE; --color-surface: #FFFFFF; --color-text: #2A1F1A; --color-text-muted: #7A6458; --color-border: #EAD8CC; --color-success: #45B69C; --color-error: #E63946; --font-display: 'Quicksand', 'Inter', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-weight-display: 700; --radius-hero: 40px; --radius-card: 20px; --radius-btn: var(--radius-full); --hero-gradient: linear-gradient(135deg, #FFF5EE 0%, #FDFBF7 100%); --blob-color-1: rgba(255,138,91,.15); --blob-color-2: rgba(69,182,156,.10); } /* ═══════════════════════════════════════════════════════════════════════════ TEMPLATE 2 — "L'Excellence Académique" Écoles primaires privées & Collèges ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="excellence"] { --color-primary: #1B3B5F; --color-primary-dark: #122840; --color-primary-light:#D0DCE9; --color-secondary: #C5A059; --color-secondary-dk: #A8854A; --color-accent: #E63946; --color-bg: #F8FAFC; --color-bg-alt: #EEF2F7; --color-surface: #FFFFFF; --color-text: #0F172A; --color-text-muted: #5A6880; --color-border: #D8E2EE; --color-success: #2E7D32; --color-error: #E63946; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-weight-display: 700; --radius-hero: 0px; --radius-card: 8px; --radius-btn: 6px; --hero-gradient: linear-gradient(180deg, #1B3B5F 0%, #0F2440 100%); --blob-color-1: rgba(197,160,89,.12); --blob-color-2: rgba(27,59,95,.08); } /* ═══════════════════════════════════════════════════════════════════════════ TEMPLATE 3 — "Nature & Bio" Montessori & Écoles alternatives ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="nature"] { --color-primary: #2D6A4F; --color-primary-dark: #1E4D38; --color-primary-light:#D8EDD5; --color-secondary: #95D5B2; --color-secondary-dk: #74C499; --color-accent: #D4A373; --color-bg: #FCF9F2; --color-bg-alt: #F5F0E5; --color-surface: #FFFDF8; --color-text: #1B4332; --color-text-muted: #587268; --color-border: #D6E9DC; --color-success: #2D6A4F; --color-error: #C0392B; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-weight-display: 600; --radius-hero: 16px; --radius-card: 16px; --radius-btn: var(--radius-full); --hero-gradient: linear-gradient(135deg, #F5F0E5 0%, #FCF9F2 100%); --blob-color-1: rgba(45,106,79,.10); --blob-color-2: rgba(149,213,178,.15); } /* ═══════════════════════════════════════════════════════════════════════════ TEMPLATE 4 — "Futur & Tech" Écoles innovantes & bilingues ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="futur"] { --color-primary: #7209B7; --color-primary-dark: #5A078F; --color-primary-light:#E5D0F4; --color-secondary: #4CC9F0; --color-secondary-dk: #29B7E2; --color-accent: #F72585; --color-bg: #FFFFFF; --color-bg-alt: #F0F0FF; --color-surface: #FAFAFA; --color-text: #0A0A0A; --color-text-muted: #6B7280; --color-border: #E5E7EB; --color-success: #10B981; --color-error: #EF4444; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-weight-display: 700; --radius-hero: 24px; --radius-card: 16px; --radius-btn: 8px; --hero-gradient: linear-gradient(135deg, #F0E6FF 0%, #E0F7FF 100%); --blob-color-1: rgba(114,9,183,.08); --blob-color-2: rgba(76,201,240,.10); } /* ── DASHBOARD THEME (agence + client) ────────────────────────────────── */ [data-theme="dashboard"] { --color-primary: #6C63FF; --color-primary-dark: #5550D9; --color-secondary: #00C9A7; --color-accent: #FFB74D; --color-bg: #F4F6F9; --color-bg-alt: #ECEEF2; --color-surface: #FFFFFF; --color-text: #1A1D23; --color-text-muted: #6B7280; --color-border: #E2E8F0; --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; --sidebar-width: 260px; --header-height: 64px; --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --radius-card: 12px; }