/** * MboaFoot — Design System : Variables CSS * Toutes les valeurs fondamentales du thème sont définies ici. * Les surcharges Customizer sont injectées dans via customizer.php */ :root { /* ── Palette Couleurs ──────────────────────────────────────────────────── */ /* Vert — couleur principale MBOAFOOT */ --mboa-green: #1A8A34; --mboa-green-dark: #0F5C23; --mboa-green-light: #22A842; --mboa-green-pale: #E8F5EC; --mboa-green-alpha: rgba(26, 138, 52, 0.12); /* Rouge — accent / live / alerte */ --mboa-red: #E63946; --mboa-red-dark: #C1121F; --mboa-red-light: #FF6B74; --mboa-red-pale: #FEE8EA; --mboa-red-alpha: rgba(230, 57, 70, 0.12); /* Or — compétitions premium / CAF Champions League */ --mboa-gold: #FFB703; --mboa-gold-dark: #D4990A; --mboa-gold-pale: #FFF8E1; /* Neutres */ --mboa-black: #0D0D0D; --mboa-dark: #1A1A1A; --mboa-gray-900: #212121; --mboa-gray-800: #333333; --mboa-gray-700: #4A4A4A; --mboa-gray-600: #666666; --mboa-gray-500: #808080; --mboa-gray-400: #999999; --mboa-gray-300: #BBBBBB; --mboa-gray-200: #DDDDDD; --mboa-gray-100: #F0F0F0; --mboa-gray-50: #F8F8F8; --mboa-white: #FFFFFF; /* Fond général */ --mboa-bg: #F5F5F5; --mboa-bg-dark: #121212; --mboa-surface: #FFFFFF; --mboa-surface-dark: #1E1E1E; /* ── Typographie ─────────────────────────────────────────────────────── */ --mboa-font-heading: 'Oswald', 'Barlow Condensed', Arial Narrow, sans-serif; --mboa-font-body: 'Inter', 'Source Sans Pro', system-ui, -apple-system, sans-serif; --mboa-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Tailles de police (échelle modulaire × 1.25) */ --mboa-text-xs: 0.75rem; /* 12px */ --mboa-text-sm: 0.875rem; /* 14px */ --mboa-text-base: 1rem; /* 16px */ --mboa-text-md: 1.125rem; /* 18px */ --mboa-text-lg: 1.25rem; /* 20px */ --mboa-text-xl: 1.5rem; /* 24px */ --mboa-text-2xl: 1.875rem; /* 30px */ --mboa-text-3xl: 2.25rem; /* 36px */ --mboa-text-4xl: 3rem; /* 48px */ --mboa-text-hero: 3.5rem; /* 56px */ /* Poids */ --mboa-weight-light: 300; --mboa-weight-regular: 400; --mboa-weight-medium: 500; --mboa-weight-semi: 600; --mboa-weight-bold: 700; /* Interligne */ --mboa-leading-tight: 1.2; --mboa-leading-snug: 1.35; --mboa-leading-normal: 1.6; --mboa-leading-relaxed: 1.75; /* ── Espacements ─────────────────────────────────────────────────────── */ --mboa-space-1: 0.25rem; /* 4px */ --mboa-space-2: 0.5rem; /* 8px */ --mboa-space-3: 0.75rem; /* 12px */ --mboa-space-4: 1rem; /* 16px */ --mboa-space-5: 1.25rem; /* 20px */ --mboa-space-6: 1.5rem; /* 24px */ --mboa-space-8: 2rem; /* 32px */ --mboa-space-10: 2.5rem; /* 40px */ --mboa-space-12: 3rem; /* 48px */ --mboa-space-16: 4rem; /* 64px */ --mboa-space-20: 5rem; /* 80px */ --mboa-space-24: 6rem; /* 96px */ /* ── Layout ─────────────────────────────────────────────────────────── */ --mboa-container-max: 1280px; --mboa-container-xl: 1140px; --mboa-container-lg: 960px; --mboa-container-md: 768px; --mboa-sidebar-width: 320px; --mboa-header-height: 64px; --mboa-topbar-height: 36px; --mboa-navbar-height: 52px; --mboa-gutter: clamp(1rem, 3vw, 1.5rem); --mboa-section-gap: clamp(2rem, 5vw, 4rem); /* ── Bordures & Rayons ───────────────────────────────────────────────── */ --mboa-radius-sm: 4px; --mboa-radius: 8px; --mboa-radius-md: 12px; --mboa-radius-lg: 16px; --mboa-radius-xl: 24px; --mboa-radius-full: 9999px; --mboa-border: 1px solid var(--mboa-gray-200); --mboa-border-dark: 1px solid var(--mboa-gray-800); /* ── Ombres ─────────────────────────────────────────────────────────── */ --mboa-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --mboa-shadow: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); --mboa-shadow-md: 0 8px 24px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); --mboa-shadow-lg: 0 16px 40px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.10); --mboa-shadow-green: 0 4px 20px rgba(26,138,52,.30); --mboa-shadow-inset: inset 0 1px 3px rgba(0,0,0,.12); /* ── Transitions ─────────────────────────────────────────────────────── */ --mboa-transition-fast: 150ms ease; --mboa-transition: 250ms ease; --mboa-transition-slow: 400ms ease; --mboa-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-index ────────────────────────────────────────────────────────── */ --mboa-z-base: 1; --mboa-z-dropdown: 100; --mboa-z-sticky: 200; --mboa-z-header: 300; --mboa-z-mobile: 400; --mboa-z-overlay: 500; --mboa-z-modal: 600; --mboa-z-toast: 700; /* ── Focus (accessibilité) ───────────────────────────────────────────── */ --mboa-focus-ring: 0 0 0 3px rgba(26, 138, 52, 0.45); --mboa-focus-ring-offset: 2px; } /* ── Mode sombre (préférence système) ───────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --mboa-bg: var(--mboa-bg-dark); --mboa-surface: var(--mboa-surface-dark); --mboa-border: 1px solid var(--mboa-gray-800); } }