/* ============================================================ SITE FLUX — Tokens & thèmes de couleur ------------------------------------------------------------ :root → thème par défaut « Lime » :root[data-theme] → palettes alternatives (mêmes clés, autres valeurs). Le sélecteur de thème pose l'attribut data-theme sur . Seuls les tokens DE COULEUR changent d'un thème à l'autre ; typographie, espacement, rayons, ombres et transitions sont définis une seule fois dans :root. Intégration WordPress : pour figer un thème, copier son bloc de couleurs dans le :root et supprimer les autres. ============================================================ */ :root { /* ---------- Couleurs (thème Lime — défaut) ---------- */ --ds-bg: #fafafa; --ds-bg-alt: #f4f4f5; --ds-bg-dark: #18181b; --ds-bg-card: #ffffff; --ds-text: #18181b; --ds-text-muted: #71717a; --ds-text-on-dark: #fafafa; --ds-accent: #84cc16; --ds-accent-hover: #65a30d; --ds-accent-subtle: #ecfccb; --ds-accent-text: #18181b; /* Couleurs accent secondaires (cards bento) */ --ds-color-amber: #fbbf24; --ds-color-amber-bg: #fef3c7; --ds-color-rose: #fb7185; --ds-color-rose-bg: #ffe4e6; --ds-color-sky: #38bdf8; --ds-color-sky-bg: #e0f2fe; --ds-color-violet: #8b5cf6; --ds-color-violet-bg:#ede9fe; --ds-border: #e4e4e7; --ds-border-subtle: #f4f4f5; /* ---------- Typographie ---------- */ --ds-font-display: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif; --ds-font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ds-size-display: clamp(2.5rem, 5.5vw, 4.5rem); --ds-size-h1: clamp(2rem, 4.5vw, 3.25rem); --ds-size-h2: clamp(1.875rem, 3.5vw, 2.5rem); --ds-size-h3: 1.25rem; --ds-size-body: 1rem; --ds-size-small: 0.875rem; --ds-size-caption: 0.75rem; --ds-weight-normal: 400; --ds-weight-medium: 500; --ds-weight-bold: 700; --ds-leading-tight: 1.05; --ds-leading-base: 1.5; --ds-leading-relaxed: 1.6; --ds-tracking-tight: -0.03em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.08em; /* ---------- Espacement ---------- */ --ds-space-xs: 0.25rem; --ds-space-sm: 0.5rem; --ds-space-md: 1rem; --ds-space-lg: 1.5rem; --ds-space-xl: 3rem; --ds-space-2xl: 5rem; --ds-space-3xl: 7rem; --ds-section-py: 5.5rem; /* ---------- Forme ---------- */ --ds-radius-sm: 10px; --ds-radius-md: 18px; --ds-radius-lg: 24px; --ds-radius-pill: 999px; /* ---------- Ombres ---------- */ --ds-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04); --ds-shadow-md: 0 4px 16px -4px rgba(24, 24, 27, 0.08); --ds-shadow-lg: 0 24px 48px -16px rgba(24, 24, 27, 0.12); /* ---------- Mouvement ---------- */ --ds-transition-fast: 150ms ease; --ds-transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1); --ds-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ THÈME — Indigo océan Accent indigo, neutres ardoise froids. Registre corporate / tech. ============================================================ */ :root[data-theme="indigo"] { --ds-bg: #f8fafc; --ds-bg-alt: #eef2f7; --ds-bg-dark: #0f172a; --ds-bg-card: #ffffff; --ds-text: #0f172a; --ds-text-muted: #64748b; --ds-text-on-dark: #f8fafc; --ds-accent: #4f46e5; --ds-accent-hover: #4338ca; --ds-accent-subtle: #e0e7ff; --ds-accent-text: #ffffff; --ds-color-amber: #06b6d4; --ds-color-amber-bg: #cffafe; --ds-color-rose: #6366f1; --ds-color-rose-bg: #e0e7ff; --ds-color-sky: #0ea5e9; --ds-color-sky-bg: #e0f2fe; --ds-color-violet: #8b5cf6; --ds-color-violet-bg:#ede9fe; --ds-border: #e2e8f0; --ds-border-subtle: #eef2f7; } /* ============================================================ THÈME — Coucher de soleil Accent orange, neutres pierre chauds. Registre chaleureux. ============================================================ */ :root[data-theme="sunset"] { --ds-bg: #fdfaf6; --ds-bg-alt: #f6efe5; --ds-bg-dark: #1d1410; --ds-bg-card: #ffffff; --ds-text: #1d1410; --ds-text-muted: #8a7563; --ds-text-on-dark: #fdfaf6; --ds-accent: #ea580c; --ds-accent-hover: #c2410c; --ds-accent-subtle: #ffedd5; --ds-accent-text: #ffffff; --ds-color-amber: #f59e0b; --ds-color-amber-bg: #fef3c7; --ds-color-rose: #f43f5e; --ds-color-rose-bg: #ffe4e6; --ds-color-sky: #fb923c; --ds-color-sky-bg: #ffedd5; --ds-color-violet: #db2777; --ds-color-violet-bg:#fce7f3; --ds-border: #ece0d2; --ds-border-subtle: #f6efe5; } /* ============================================================ THÈME — Violet baie Accent violet + magenta/rose. Registre créatif, premium. ============================================================ */ :root[data-theme="berry"] { --ds-bg: #faf8fd; --ds-bg-alt: #f1ecf8; --ds-bg-dark: #1a1326; --ds-bg-card: #ffffff; --ds-text: #1a1326; --ds-text-muted: #6b6379; --ds-text-on-dark: #faf8fd; --ds-accent: #7c3aed; --ds-accent-hover: #6d28d9; --ds-accent-subtle: #ede9fe; --ds-accent-text: #ffffff; --ds-color-amber: #d946ef; --ds-color-amber-bg: #fae8ff; --ds-color-rose: #ec4899; --ds-color-rose-bg: #fce7f3; --ds-color-sky: #8b5cf6; --ds-color-sky-bg: #ede9fe; --ds-color-violet: #6366f1; --ds-color-violet-bg:#e0e7ff; --ds-border: #e8e1f3; --ds-border-subtle: #f1ecf8; } /* ============================================================ THÈME — Mode sombre Fond sombre, texte clair, accent lime éclairci. ============================================================ */ :root[data-theme="dark"] { --ds-bg: #161618; --ds-bg-alt: #1f1f22; --ds-bg-dark: #0a0a0c; --ds-bg-card: #232327; --ds-text: #fafafa; --ds-text-muted: #a1a1aa; --ds-text-on-dark: #fafafa; --ds-accent: #a3e635; --ds-accent-hover: #bef264; --ds-accent-subtle: #2d3a16; --ds-accent-text: #161618; --ds-color-amber: #fbbf24; --ds-color-amber-bg: #3a2e0c; --ds-color-rose: #fb7185; --ds-color-rose-bg: #3a1a22; --ds-color-sky: #38bdf8; --ds-color-sky-bg: #0e2a3a; --ds-color-violet: #a78bfa; --ds-color-violet-bg:#271d3d; --ds-border: #2f2f35; --ds-border-subtle: #232327; }