/* ════════════════════════════════════════════════════════════════════════ * MyESEF — Design tokens * Variables CSS de base. Aucun sélecteur, aucune règle visuelle ici. * Tout composant lit ces variables — jamais de couleur hardcodée ailleurs. * ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Couleurs neutres (palette beige/charbon par défaut) ── */ --c-bg: #f0f2f2; --c-bg-elevated: #ffffff; --c-bg-subtle: #f7f8f8; --c-border: #e2e0d9; --c-border-strong: #c9c7bf; --c-text: #060606; --c-text-muted: #5b5b5b; --c-text-faded: #bdbdbd; /* gris clair — nav inactive */ --c-text-on-dark: #ffffff; /* ── Couleurs sémantiques (rôles UI) ── */ --c-primary: var(--c-text); /* charbon — surchargé par client.primary_color au runtime */ --c-primary-hover: #000000; --c-primary-fg: var(--c-text-on-dark); /* --c-client : couleur d'accent du client courant. Surchargé sur `.app-shell` à partir de clients.primary_color. Fallback charbon au niveau :root pour que les pages déconnectées (login, OTP, reset…) qui n'ont PAS de .app-shell aient quand même un hover CTA noir plutôt que transparent. */ --c-client: var(--c-text); --c-accent: #ea0000; /* rouge praquin — réservé aux accents critiques */ --c-success-bg: #e6f4ea; --c-success-fg: #1e6f3a; --c-warning-bg: #fef5d8; --c-warning-fg: #6b4f00; --c-error-bg: #fdecea; --c-error-fg: #8a1a14; --c-info-bg: #e8f0fb; --c-info-fg: #1d4d96; /* ── Rôles utilisateur (héritage v1, repris dans le dashboard) ── */ --role-super-admin-bg:#fcd4d4; --role-super-admin-fg:#ea0000; --role-admin-bg: #f8f0d0; --role-admin-fg: #876c00; --role-editor-bg: #d0e4fd; --role-editor-fg: #066ef0; --role-reviewer-bg: #d0efd0; --role-reviewer-fg: #08a308; --role-viewer-bg: #d0efd0; --role-viewer-fg: #08a308; /* ── Typographie ── */ --font-sans: 'PPNeueMontreal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; /* Ancien token de police d'accroche « Windsor » — désormais aligné sur * la police classique PPNeueMontreal. Conservé comme alias pour ne pas * casser les templates existants (.windsor / .brand). */ --font-display: var(--font-sans); /* Échelle typo en rem — 1rem = font-size de (16px par défaut navigateur, respecte les préférences accessibilité de l'utilisateur). Pour changer toutes les tailles d'un coup : régler la font-size de dans base.css ou tokens.css. */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-md: 1.0625rem; /* 17px — défaut body (16px + 1) */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.375rem; /* 22px */ --fs-2xl: 1.625rem; /* 26px */ --fs-3xl: 1.875rem; /* 30px */ --lh-tight: 1.25; --lh-base: 1.5; /* ── Espacements (échelle 4px) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Radius / ombres ── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); --shadow-lg: 0 4px 12px rgba(0,0,0,.08), 0 20px 40px rgba(0,0,0,.08); /* ── Transitions ── */ --tr-fast: 100ms ease; --tr-base: 150ms ease; /* ── Dimensions partagées ── */ --header-pad-x: var(--sp-8); /* padding latéral du header (32px) */ --header-pad-y: var(--sp-5); /* padding vertical du header (20px) */ --brand-zone: 48px; /* zone logo client carrée */ /* Hauteur du header = brand + 2 × padding vertical (pas de border). Padding vertical = sp-5 (20px) → header total = 48 + 40 = 88px. */ --header-height: calc(var(--brand-zone) + 2 * var(--header-pad-y)); /* Rail horizontal du contenu : aligné avec le 1er lien de nav = header-pad-x + brand-zone + gap header (sp-8 = 32px) */ --content-rail: calc(var(--header-pad-x) + var(--brand-zone) + var(--sp-8)); }