/* * ActiveFoot — Theme tokens * Lot 10 / Refonte 3 * * Objectif : préparer le futur mode clair/sombre sans modifier le rendu actuel. * Ce fichier définit uniquement des variables CSS namespacées `--af-*`. * Aucune règle visuelle globale n'est appliquée ici volontairement. */ :root, html[data-af-theme="dark"] { /* Fonts */ --af-font-heading: 'Exo 2', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --af-font-body: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Backgrounds */ --af-bg-page: #0e1014; --af-bg-page-deep: #05080d; --af-bg-surface: #161920; --af-bg-surface-2: #1e222b; --af-bg-surface-3: #252b37; --af-bg-elevated: #111827; --af-bg-soft: rgba(15, 23, 42, .72); --af-bg-green-soft: rgba(34, 197, 94, .10); --af-bg-blue-soft: rgba(96, 165, 250, .12); --af-bg-gold-soft: rgba(234, 179, 8, .13); --af-bg-red-soft: rgba(239, 68, 68, .12); /* Borders */ --af-border-subtle: rgba(148, 163, 184, .16); --af-border-default: rgba(148, 163, 184, .24); --af-border-strong: rgba(148, 163, 184, .34); --af-border-green: rgba(34, 197, 94, .36); --af-border-blue: rgba(96, 165, 250, .30); --af-border-gold: rgba(234, 179, 8, .34); --af-border-red: rgba(239, 68, 68, .34); /* Text */ --af-text-main: #e2e8f0; --af-text-strong: #f8fafc; --af-text-muted: #94a3b8; --af-text-subtle: #64748b; --af-text-disabled: #475569; --af-text-on-green: #052e16; --af-text-on-gold: #1f1300; /* Brand / states */ --af-green: #22c55e; --af-green-strong: #16a34a; --af-green-soft: #86efac; --af-blue: #60a5fa; --af-blue-strong: #3b82f6; --af-gold: #eab308; --af-gold-strong: #f59e0b; --af-red: #ef4444; --af-red-strong: #dc2626; --af-orange: #fb923c; --af-violet: #a78bfa; /* Effects */ --af-glow-green: rgba(34, 197, 94, .14); --af-glow-blue: rgba(96, 165, 250, .14); --af-shadow-soft: 0 18px 55px rgba(0, 0, 0, .25); --af-shadow-strong: 0 24px 80px rgba(0, 0, 0, .35); /* Radius / spacing */ --af-radius-xs: 6px; --af-radius-sm: 8px; --af-radius-md: 12px; --af-radius-lg: 18px; --af-radius-xl: 24px; --af-radius-pill: 999px; /* Semantic aliases for future patches */ --af-color-success: var(--af-green); --af-color-info: var(--af-blue); --af-color-warning: var(--af-gold); --af-color-danger: var(--af-red); --af-surface-card: var(--af-bg-surface); --af-surface-card-2: var(--af-bg-surface-2); --af-surface-panel: var(--af-bg-elevated); } /* Préparation future : non actif tant qu'aucun script ne place data-af-theme="light" sur . */ html[data-af-theme="light"] { --af-bg-page: #f4f7fb; --af-bg-page-deep: #e9eef6; --af-bg-surface: #ffffff; --af-bg-surface-2: #f8fafc; --af-bg-surface-3: #eef2f7; --af-bg-elevated: #ffffff; --af-bg-soft: rgba(255, 255, 255, .86); --af-bg-green-soft: rgba(22, 163, 74, .10); --af-bg-blue-soft: rgba(37, 99, 235, .10); --af-bg-gold-soft: rgba(202, 138, 4, .12); --af-bg-red-soft: rgba(220, 38, 38, .10); --af-border-subtle: rgba(15, 23, 42, .10); --af-border-default: rgba(15, 23, 42, .16); --af-border-strong: rgba(15, 23, 42, .24); --af-border-green: rgba(22, 163, 74, .28); --af-border-blue: rgba(37, 99, 235, .24); --af-border-gold: rgba(202, 138, 4, .28); --af-border-red: rgba(220, 38, 38, .28); --af-text-main: #172033; --af-text-strong: #020617; --af-text-muted: #526173; --af-text-subtle: #748195; --af-text-disabled: #94a3b8; --af-text-on-green: #052e16; --af-text-on-gold: #1f1300; --af-green: #16a34a; --af-green-strong: #15803d; --af-green-soft: #22c55e; --af-blue: #2563eb; --af-blue-strong: #1d4ed8; --af-gold: #ca8a04; --af-gold-strong: #a16207; --af-red: #dc2626; --af-red-strong: #b91c1c; --af-orange: #ea580c; --af-violet: #7c3aed; --af-glow-green: rgba(22, 163, 74, .14); --af-glow-blue: rgba(37, 99, 235, .14); --af-shadow-soft: 0 18px 48px rgba(15, 23, 42, .10); --af-shadow-strong: 0 24px 80px rgba(15, 23, 42, .14); }