/** * Petzerhiel — Design tokens (BRD UI v1 §4.1, Sprint 31 Bloc 1 Fondations U1). * * SOURCE DE VÉRITÉ UNIQUE pour couleurs, espacements, typographie, rayons, ombres. * Aucune valeur hardcoded ailleurs (à terme : portal.css + admin.css migrent * progressivement vers ces variables — refactor distribué Bloc 10). * * Convention de nommage : --pz-{category}-{role}-{state?}. * Exemples : --pz-primary, --pz-urgent-hover, --pz-bg-raised, --pz-space-4. * * Modes thème : auto-détecté via prefers-color-scheme par défaut, override * possible via [data-theme="light"] ou [data-theme="dark"] sur . * Densité : [data-density="compact"] (syndic/admin) ou [data-density="aerated"] * (copropriétaire/locataire/prestataire) sur . * * RGPD/perf : zéro web-font fetch (system-ui), conforme cible Lighthouse ≥ 80 * + TTI < 1.5s 4G (BRD §6.8). */ :root { /* ────────────────────────────────────────────────────────────────────── * COULEURS PRIMAIRES — Cyan Petzerhiel (préservé du portal.css existant) * ──────────────────────────────────────────────────────────────────────*/ --pz-primary: #0284c7; /* S107 V_D.8 — sky-600 (vs sky-500 #0ea5e9) ratio 3.92:1 AA-large ✅ */ --pz-primary-hover: #0369a1; /* sky-700 — ratio 5.17:1 AA ✅ */ --pz-primary-active: #075985; /* sky-800 — ratio 7.31:1 AAA ✅ */ --pz-primary-soft: #e0f2fe; /* ────────────────────────────────────────────────────────────────────── * COULEURS SÉMANTIQUES (BRD §3.6 zéro tolérance arbre-de-Noël) * Une couleur = un message, pas de déco gratuite. * ──────────────────────────────────────────────────────────────────────*/ --pz-urgent: #dc2626; /* rouge — pile à dérouler, action requise */ --pz-urgent-hover: #b91c1c; --pz-urgent-active: #991b1b; --pz-urgent-strong: #7f1d1d; /* S128 V_A.2 — dark red admin-alert-error bg + cabinet pilote palette */ --pz-urgent-soft: #fee2e2; --pz-warning: #f59e0b; /* jaune — anomalie persistante, à corriger un jour */ --pz-warning-hover: #d97706; --pz-warning-active: #b45309; --pz-warning-strong: #78350f; /* S128 V_A.2 — dark amber pour bg badges legacy migrés */ --pz-warning-soft: #fef3c7; --pz-info: #2563eb; /* S107 V_D.8 — blue-600 (vs blue-500 #3b82f6) ratio 5.17:1 AA ✅ */ --pz-info-hover: #2563eb; --pz-info-active: #1d4ed8; --pz-info-strong: #1e3a8a; /* S128 V_A.2 — dark blue bg cabinet pilote */ --pz-info-soft: #dbeafe; --pz-success: #10b981; /* vert — confirmation succès, baisse impayés OK */ --pz-success-hover: #059669; --pz-success-active: #047857; --pz-success-strong: #14532d; /* S128 V_A.2 — dark green admin-alert-success bg */ --pz-success-soft: #d1fae5; --pz-proxy: #8b5cf6; /* S128 V_A.2 — violet AG mandats/représentations (semantic distinct primary) */ --pz-proxy-soft: #ede9fe; --pz-proxy-active: #6d28d9; --pz-neutral: #64748b; /* gris — au repos, pas de message */ --pz-neutral-hover: #475569; --pz-neutral-active: #334155; --pz-neutral-soft: #f1f5f9; --pz-video-backdrop: #000; /* S141 — fond noir derrière flux vidéo (scanner QR AG Studio) */ /* ────────────────────────────────────────────────────────────────────── * COULEURS SURFACE — adaptées dark/light via [data-theme] * (mode light par défaut, override automatique via prefers-color-scheme) * ──────────────────────────────────────────────────────────────────────*/ --pz-bg-base: #ffffff; /* fond principal page (mode clair par défaut) */ --pz-bg-raised: #f8fafc; /* fond panel/card légèrement élevé */ --pz-bg-overlay: rgba(15, 23, 42, 0.6); /* fond modal/drawer */ --pz-bg-input: #ffffff; /* fond inputs/textarea/select */ --pz-text-primary: #0f172a; /* texte principal */ --pz-text-secondary: #475569; /* texte secondaire/labels */ --pz-text-muted: #94a3b8; /* texte désactivé/placeholder */ --pz-text-on-primary: #ffffff; /* texte sur fond primary/urgent/etc */ --pz-link: #0284c7; /* S153 — couleur des liens de contenu (mode CLAIR, AA sur blanc). Bascule en bleu clair lisible en mode sombre (cf blocs dark). */ --pz-border: #e2e8f0; /* bordure standard */ --pz-border-strong: #cbd5e1; /* bordure focus/hover */ --pz-border-soft: #f1f5f9; /* bordure très discrète/séparateur */ /* ────────────────────────────────────────────────────────────────────── * S70 V_A.2 — Logo Petzerhiel (canonique fixe NON personnalisable). * Bascule mode clair/sombre uniquement (pas de user-theme override). * Mode sombre = blanc, mode clair = cyan Petzerhiel #0ea5e9. * ──────────────────────────────────────────────────────────────────────*/ --pz-brand-logo: #0ea5e9; /* mode clair défaut */ /* S87 V_A α.2 — fond inputs disabled/readonly (Mon compte/Organisation lecture seule) */ --pz-input-disabled-bg: rgba(15,23,42,0.04); /* ────────────────────────────────────────────────────────────────────── * S65 R1 — 5 vars PERSONNALISABLES par utilisateur (× 2 modes en DB * party_portal_auth.theme_dark_*/theme_light_*). * Override final via