/* ══════════════════════════════════════════════════════════════════════ 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) ─── */ --cyan: #00d4ff; /* primary */ --cyan2: #00ffd0; /* accent */ --brand-primary: var(--cyan); --brand-accent: var(--cyan2); /* ─── Semantic accents (constants — same hue in light & dark) ─── */ --orange: #ff6b2b; --green: #00e676; --pink: #ff4fa3; --yellow: #ffc107; --blue: #2979ff; --accent: #6c5ce7; } /* ══════════════════════════════════════════════════════════════════════ 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: #101011; --surface: #080d18; --card: linear-gradient(0deg, #000, #16191e); --card-solid: #16191e; /* version non-gradient pour les contextes qui ne supportent pas un gradient (ex. inputs, badges) */ --card2: #0e1528; /* Borders */ --border: rgba(0, 200, 230, 0.1); --border2: rgba(255, 255, 255, 0.05); /* Text scale */ --text: #cdd8f0; /* texte principal */ --text-strong: #ffffff; /* titres importants — quasi blanc en dark */ --text-on-card: #cdd8f0; /* texte sur .lidia-card / .stat-card */ --text-on-primary: #05080f; /* texte sur boutons cyan (contrast élevé) */ --muted: #646669; --muted2: #2e3a52; /* Shadows */ --shadow-card: 0 8px 30px rgba(0, 0, 0, .4); --shadow-modal: 0 20px 60px rgba(0, 0, 0, .6); /* Hover/active overlays — utilisent color-mix sur primary */ --overlay-hover: rgba(0, 212, 255, .06); --overlay-active: rgba(0, 212, 255, .14); } /* ══════════════════════════════════════════════════════════════════════ 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: #f5f7fa; --surface: #ffffff; --card: #ffffff; --card-solid: #ffffff; --card2: #f0f3f8; /* Borders — plus contrastés sur fond clair */ --border: rgba(0, 0, 0, 0.08); --border2: rgba(0, 0, 0, 0.06); /* Text scale */ --text: #1a1f2e; /* texte principal — très sombre pour contraste */ --text-strong: #0a0e1a; /* titres */ --text-on-card: #1a1f2e; --text-on-primary: #ffffff; /* texte sur boutons primary — blanc sur fond coloré reste contrasté car les couleurs primaires sont saturées (cyan #00d4ff) */ --muted: #6b7280; --muted2: #d1d5db; /* Shadows — beaucoup plus subtiles en light (pas d'ombres profondes) */ --shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); --shadow-modal: 0 10px 40px rgba(0, 0, 0, .15); /* Hover/active overlays */ --overlay-hover: rgba(0, 212, 255, .08); --overlay-active: rgba(0, 212, 255, .16); } /* ─── 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: '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 /