/* ══════════════════════════════════════════════════════════════════════ LIDIA Design Tokens — single source of truth ══════════════════════════════════════════════════════════════════════ Loaded by all layouts (admin, agency, lidia, lidia_auth). Architecture (2026-04-25 dual-mode refactor) : ───────────────────────────────────────────── - `:root` contient les BRAND tokens (cyan/accent + accents sémantiques constants peu importe le mode : pink, green, orange, etc.) - `body[data-mode="dark"]` (= défaut, aussi appliqué quand body n'a pas d'attribut data-mode) définit la palette sombre - `body[data-mode="light"]` redéfinit `--bg`, `--card`, `--text`, etc. pour le light mode - Une agence white-label choisit son `mode` + 2 couleurs (primary/accent) dans /agency/branding. Pas plus de pickers --bg arbitraires (qui créaient des contrastes catastrophiques quand les hardcoded color:#fff se retrouvaient sur fond clair). - Per-user toggle ☀️/🌙 (Phase D) override le choix agence via localStorage + sync DB. Si tu ajoutes un nouveau composant : utilise TOUJOURS les tokens sémantiques (`var(--text)`, `var(--card)`, `var(--text-on-primary)`). N'écris JAMAIS `color:#fff` ou `background:#0c1220` en dur — ça pète en light mode. ══════════════════════════════════════════════════════════════════════ */ :root { /* ─── Brand accents (overridable per agency) — Console slate-blue default ─── */ --cyan: #4f7cf0; /* primary (agency-overridable) */ --cyan2: #6d8bf5; /* accent2 */ --brand-primary: var(--cyan); --brand-accent: var(--cyan2); /* ─── Semantic accents (muted « Console » — calme, jamais néon) ─── */ --orange: #cf8a48; --green: #46976f; --pink: #c07298; --yellow: #cba140; --blue: #4f86c9; --accent: #6f63c0; } /* ══════════════════════════════════════════════════════════════════════ DARK MODE (default — applies to body without data-mode AND data-mode="dark") ══════════════════════════════════════════════════════════════════════ Le selector `body, body[data-mode="dark"]` garantit que les pages qui n'ont pas encore migré vers data-mode (transition Phase A→B) bénéficient quand même de la palette dark. Pas de breakage. ══════════════════════════════════════════════════════════════════════ */ body, body[data-mode="dark"] { /* Surfaces */ --bg: #0e1218; --surface: #141a22; --card: #171e28; --card-solid: #171e28; /* Console : cartes solides (plus de gradient) */ --card2: #1c2530; --input-bg: #10161f; /* champ de saisie : inset sous la carte (Console) */ /* Borders — Console : hairline froide */ --border: rgba(150, 170, 200, 0.13); --border2: rgba(150, 170, 200, 0.08); /* Text scale */ --text: #d7deea; /* texte principal */ --text-strong: #f4f7fb; /* titres */ --text-on-card: #d7deea; --text-on-primary: #ffffff; /* texte sur boutons accent (slate-blue → blanc) */ --muted: #7f8b9b; --muted2: #586471; /* Shadows — Console : discrètes (les bordures portent la hiérarchie) */ --shadow-card: 0 2px 10px rgba(0, 0, 0, .35); --shadow-modal: 0 18px 50px rgba(0, 0, 0, .55); /* Hover/active overlays — neutres (calme) */ --overlay-hover: rgba(255, 255, 255, .04); --overlay-active: rgba(255, 255, 255, .08); } /* ══════════════════════════════════════════════════════════════════════ S5 FIX (2026-05-16 PM) — force body bg+color to re-resolve on data-mode flip ══════════════════════════════════════════════════════════════════════ Chromium bug: when a rule like `body { background: var(--bg) }` has a selector that doesn't reference the attribute being changed (data-mode), the engine optimizes by NOT re-evaluating the rule when only the var changes — even though var() resolution SHOULD make the property dirty. Result: body's computed background-color stays at the old value (dark) even after `` swaps --bg to #f5f7fa. Fix: an explicit rule whose selector DOES match the data-mode attribute. Now when data-mode flips, Chromium re-evaluates the rule, var(--bg) resolves to the new value, and body's bg follows. Same for color. Verified live via Chrome MCP (lidia/agent) before + after — visual light/dark/light cycle confirmed via screenshots. ══════════════════════════════════════════════════════════════════════ */ body[data-mode="dark"], body[data-mode="light"] { background-color: var(--bg); color: var(--text); } /* ══════════════════════════════════════════════════════════════════════ LIGHT MODE ══════════════════════════════════════════════════════════════════════ Activé par émis par les layouts quand l'agence a choisi le light mode (brand_theme_json.mode === "light") OU quand l'utilisateur a forcé le toggle via localStorage. ══════════════════════════════════════════════════════════════════════ */ body[data-mode="light"] { /* Surfaces */ --bg: #e4e7ed; --surface: #eceff4; --card: #f4f6f9; --card-solid: #f4f6f9; --card2: #e7eaf1; --input-bg: #eef1f6; /* champ de saisie sur carte claire */ /* Borders — hairline froide sur fond clair */ --border: rgba(24, 34, 54, 0.13); --border2: rgba(24, 34, 54, 0.08); /* Text scale */ --text: #2b3543; /* texte principal */ --text-strong: #101722; /* titres */ --text-on-card: #2b3543; --text-on-primary: #ffffff; /* texte sur boutons accent */ --muted: #5f6b7b; --muted2: #939eae; /* Shadows — subtiles en light (Console dim, pas de blanc pur) */ --shadow-card: 0 1px 3px rgba(20, 30, 50, .06), 0 1px 2px rgba(20, 30, 50, .04); --shadow-modal: 0 10px 40px rgba(20, 30, 50, .14); /* Hover/active overlays */ --overlay-hover: rgba(24, 34, 54, .05); --overlay-active: rgba(24, 34, 54, .09); } /* ─── Utility classes (loaded with tokens, available everywhere) ─── */ /* Screen-reader-only labels — used by auth forms for a11y compliance */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Spinning icon (used with mdi-loading) */ .mdi-spin { animation: lidia-spin 1.2s linear infinite; display: inline-block; } @keyframes lidia-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ─── Empty state component (Round 1.9) ─── */ .empty-state { padding: 36px 20px; text-align: center; color: var(--muted); font-size: .82rem; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-state-icon { font-size: 2.6rem; opacity: .25; color: var(--cyan); line-height: 1; } .empty-state-title { font-family:var(--font-title, 'Rajdhani', sans-serif); font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: .04em; } .empty-state-help { max-width: 340px; line-height: 1.55; font-size: .8rem; color: var(--muted); } /* CTA wrapper. Supports a single button (margin-top only) OR a row of actions (flex+wrap+gap). The flex behaviour kicks in only when used as a container around multiple /