/* Charte graphique Radar Sécu — §2 à §4. Seul fichier où une couleur est écrite en dur. Toute autre feuille passe par ces variables : un thème se corrige ici, pas dans dix endroits. Ordre de priorité du thème (§6) : choix explicite de l'utilisateur (attribut posé par le serveur d'après le cookie), puis préférence système, puis clair. L'attribut est sur et non sur pour éviter le flash de thème clair au chargement. */ :root { /* Fondations neutres */ --bg: #FAFAF9; --bg-elevated: #FFFFFF; --bg-subtle: #F1F1EF; --border: #DEDEDA; --border-strong: #BFBFBA; --text: #18181B; --text-muted: #5C5C63; --text-faint: #8A8A91; /* Rouge de marque — interactif et identitaire, jamais une sévérité */ --accent: #B41127; --accent-hover: #8E0D1F; --accent-subtle: #FCEFF1; --accent-border: #E8B4BC; --focus: #B41127; /* Échelle de sévérité, ordonnée par luminosité décroissante */ --sev-crit-bg: #7A0B18; --sev-crit-fg: #FFFFFF; --sev-high-bg: #C2410C; --sev-high-fg: #FFFFFF; --sev-med-bg: #A16207; --sev-med-fg: #FFFFFF; --sev-low-bg: #3F6212; --sev-low-fg: #FFFFFF; --sev-none-bg: #E4E4E7; --sev-none-fg: #3F3F46; /* Signaux spécifiques */ --kev: #7A0B18; --fixed: #15803D; --generated: #7C3AED; --stale: #A16207; --news-card: #EFEBE3; --news-card-border: #C9C0B0; --news-src: #6B5F4E; /* Typographie */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* Espacement, base 4 px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Formes — tous les blocs du site sont arrondis */ --radius-sm: 5px; --radius: 9px; --radius-lg: 12px; /* Ombres, uniquement fonctionnelles */ --shadow-menu: 0 4px 12px rgba(0, 0, 0, .12); --shadow-modal: 0 12px 32px rgba(0, 0, 0, .18); --measure: 68ch; } /* Le thème sombre est décrit une fois, puis appliqué par deux sélecteurs distincts : l'attribut explicite l'emporte toujours, la préférence système ne s'applique qu'à défaut de choix contraire. */ [data-theme="dark"] { --bg: #141416; --bg-elevated: #1C1C1F; --bg-subtle: #232327; --border: #2E2E33; --border-strong: #42424A; --text: #EDEDEF; --text-muted: #9A9AA3; --text-faint: #6E6E77; --accent: #E8455C; --accent-hover: #F26C7E; --accent-subtle: #2A1418; --accent-border: #5A2029; --focus: #E8455C; --sev-crit-bg: #7A0B18; --sev-crit-fg: #FFE5E9; --sev-high-bg: #7C2D12; --sev-high-fg: #FFE8D9; --sev-med-bg: #713F12; --sev-med-fg: #FEF3C7; --sev-low-bg: #365314; --sev-low-fg: #ECFCCB; --sev-none-bg: #2E2E33; --sev-none-fg: #A1A1AA; --kev: #E8455C; --fixed: #4ADE80; --generated: #A78BFA; --stale: #D9A441; --news-card: #26252B; --news-card-border: #4A4750; --news-src: #B8A88E; /* Une ombre ne se voit pas sur fond sombre : elle est remplacée par une bordure. */ --shadow-menu: 0 0 0 1px var(--border-strong); --shadow-modal: 0 0 0 1px var(--border-strong); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141416; --bg-elevated: #1C1C1F; --bg-subtle: #232327; --border: #2E2E33; --border-strong: #42424A; --text: #EDEDEF; --text-muted: #9A9AA3; --text-faint: #6E6E77; --accent: #E8455C; --accent-hover: #F26C7E; --accent-subtle: #2A1418; --accent-border: #5A2029; --focus: #E8455C; --sev-crit-bg: #7A0B18; --sev-crit-fg: #FFE5E9; --sev-high-bg: #7C2D12; --sev-high-fg: #FFE8D9; --sev-med-bg: #713F12; --sev-med-fg: #FEF3C7; --sev-low-bg: #365314; --sev-low-fg: #ECFCCB; --sev-none-bg: #2E2E33; --sev-none-fg: #A1A1AA; --kev: #E8455C; --fixed: #4ADE80; --generated: #A78BFA; --stale: #D9A441; --news-card: #26252B; --news-card-border: #4A4750; --news-src: #B8A88E; --shadow-menu: 0 0 0 1px var(--border-strong); --shadow-modal: 0 0 0 1px var(--border-strong); } }