/* ========================================================================== VARIABLES.CSS — Jetons de design Préfecture de Police LGP ========================================================================== */ :root { /* --- Couleurs institutionnelles --- */ --gp-blue: #000091; /* Bleu République — accent (liens, icônes, bordures) : s'éclaircit en sombre pour rester lisible */ --gp-blue-dark: #00006e; --gp-blue-light: #e5e5f7; /* Fond bleu très clair */ --gp-blue-hover: #1212ff; --gp-blue-solid: #000091; /* Bleu République fixe — aplats avec texte blanc (hero, boutons pleins, bandeau…) : ne bascule jamais */ --gp-blue-solid-dark: #00006e; /* --- Teintes d'état (badges, alertes) — s'adaptent en mode sombre --- */ --gp-red-light: #fbe6e6; --gp-red-dark: #7a1013; --gp-warning: #b06a00; --gp-warning-light: #fff4e0; --gp-warning-dark: #7a4a00; --gp-success: #18753c; --gp-success-light: #e4f5ea; --gp-success-dark: #145c30; --gp-red: #c9191e; /* Rouge discret, accents uniquement */ --gp-white: #ffffff; /* Blanc fixe : texte/icônes sur fond coloré (boutons, hero, footer) */ --gp-surface: #ffffff; /* Fond des surfaces (cartes, header, menus…) : bascule en sombre */ --gp-gray-50: #f6f6f8; --gp-gray-100: #eeeef2; --gp-gray-200: #e1e1e6; --gp-gray-400: #a3a3ab; --gp-gray-600: #666670; --gp-gray-800: #2c2c34; --gp-black: #1b1b1f; /* --- Texte --- */ --gp-text: #1b1b24; --gp-text-muted: #55555f; --gp-text-inverse: #ffffff; /* --- Typographie --- */ --gp-font-base: 'Public Sans', 'Marianne', 'Inter', 'Source Sans Pro', system-ui, -apple-system, sans-serif; --gp-font-display: 'Public Sans', 'Marianne', 'Inter', sans-serif; --gp-fs-xs: 0.8125rem; --gp-fs-sm: 0.9375rem; --gp-fs-base: 1rem; --gp-fs-lg: 1.125rem; --gp-fs-xl: 1.375rem; --gp-fs-2xl: 1.75rem; --gp-fs-3xl: 2.25rem; --gp-fs-4xl: 3rem; /* --- Espacements --- */ --gp-space-1: 0.25rem; --gp-space-2: 0.5rem; --gp-space-3: 1rem; --gp-space-4: 1.5rem; --gp-space-5: 2.5rem; --gp-space-6: 4rem; --gp-space-7: 6rem; /* --- Rayons & ombres --- */ --gp-radius-sm: 2px; --gp-radius-md: 4px; --gp-radius-lg: 8px; --gp-shadow-sm: 0 1px 3px rgba(0, 0, 24, 0.08); --gp-shadow-md: 0 4px 16px rgba(0, 0, 24, 0.10); --gp-shadow-lg: 0 12px 32px rgba(0, 0, 24, 0.14); /* --- Transitions --- */ --gp-transition-fast: 150ms ease; --gp-transition-base: 250ms ease; /* --- Structure --- */ --gp-header-height: 140px; --gp-band-height: 4px; --gp-container-max: 1200px; } /* ========================================================================== MODE SOMBRE — activé via (voir assets/js/theme.js) Le clair reste la valeur par défaut ; on ne redéfinit que les jetons de couleur, la typographie/espacements/rayons restent identiques. ========================================================================== */ :root[data-theme="dark"] { --gp-blue: #5b7cff; --gp-blue-dark: #869bff; --gp-blue-light: #1c2340; --gp-blue-hover: #7c98ff; --gp-red: #ff5b60; /* --gp-white n'est PAS redéfini : il reste blanc fixe (texte sur fond coloré). */ --gp-surface: #1b1d26; --gp-gray-50: #20222d; --gp-gray-100: #262835; --gp-gray-200: #343745; --gp-gray-400: #6b6f80; --gp-gray-600: #9a9eb0; --gp-gray-800: #e6e6ee; --gp-black: #f2f2f7; --gp-text: #e6e6ee; --gp-text-muted: #a6aac0; /* --gp-text-inverse n'est pas redéfini : texte sur fond de couleur fixe (ex. .section-dark), toujours blanc. */ --gp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --gp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --gp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --gp-red-light: #3a1f22; --gp-red-dark: #ffb3b5; --gp-warning: #e0a530; --gp-warning-light: #3a2f14; --gp-warning-dark: #ffcf80; --gp-success: #2fa85f; --gp-success-light: #16301f; --gp-success-dark: #7fe0a5; }