/* ========================================================================== AV-Connexion — Design Tokens -------------------------------------------------------------------------- Toutes les variables CSS du design system vivent ici. AUCUNE valeur en dur dans les autres fichiers : tout passe par var(--av-*). Light mode = :root ou [data-theme="light"] Dark mode = [data-theme="dark"] ========================================================================== */ /* --- Light mode (défaut) --------------------------------------------------- */ :root, [data-theme="light"] { /* Surfaces & texte */ --av-bg: #FFFFFF; --av-bg-dim: #FBFBFC; --av-bg-soft: #F7F8FA; --av-bg-strong: #EFF1F4; --av-border: #E5E7EB; --av-border-strong: #D1D5DB; --av-text: #1A1A1A; --av-text-muted: #6B7280; --av-text-faint: #9CA3AF; /* Marque */ --av-brand: #0020E0; --av-brand-hover: #001AC2; --av-brand-soft: #E8EBFF; /* Badges colorés (variantes pour fond clair) */ --av-badge-error-bg: #FEE2E2; --av-badge-error-fg: #B91C1C; --av-badge-warning-bg: #FEF3C7; --av-badge-warning-fg: #B45309; --av-badge-info-bg: #DBEAFE; --av-badge-info-fg: #1D4ED8; --av-badge-success-bg: #D1FAE5; --av-badge-success-fg: #047857; /* Ombres */ --av-shadow-sm: 0 1px 2px rgba(0,0,0,.05); --av-shadow-md: 0 2px 6px rgba(0,0,0,.06); --av-shadow-lg: 0 8px 24px rgba(0,0,0,.08); --av-shadow-focus: 0 0 0 3px rgba(0,32,224,.15); /* --- Sémantique : surfaces ------------------------------------- */ --av-surface-page: var(--av-bg-dim); --av-surface-default: var(--av-bg); --av-surface-raised: var(--av-bg); --av-surface-sunken: var(--av-bg-soft); --av-surface-overlay: rgba(0, 0, 0, .45); /* --- Sémantique : texte sur fonds colorés --------------------- */ --av-text-on-brand: #FFFFFF; --av-text-on-success: #FFFFFF; --av-text-on-warning: #1A1A1A; --av-text-on-error: #FFFFFF; --av-text-on-info: #FFFFFF; /* --- Sémantique : bordures ----------------------------------- */ --av-border-default: var(--av-border); --av-border-focus: var(--av-brand); /* --- Sémantique : états interactifs -------------------------- */ --av-state-hover-bg: var(--av-bg-soft); --av-state-pressed-bg: var(--av-bg-strong); --av-state-selected-bg: var(--av-brand-soft); --av-state-selected-fg: var(--av-brand-hover); --av-state-disabled-bg: var(--av-bg-soft); --av-state-disabled-fg: var(--av-text-faint); --av-state-focus-ring: var(--av-shadow-focus); } /* --- Dark mode ------------------------------------------------------------- */ [data-theme="dark"] { --av-bg: #0F111A; --av-bg-dim: #14182A; --av-bg-soft: #1A1D2D; --av-bg-strong: #232638; --av-border: #2A2E45; --av-border-strong: #3A3F5C; --av-text: #F9FAFB; --av-text-muted: #9CA3AF; --av-text-faint: #6B7280; --av-brand: #4D66E8; --av-brand-hover: #6B82F2; --av-brand-soft: #1A1F4D; --av-badge-error-bg: rgba(239,68,68,.15); --av-badge-error-fg: #FCA5A5; --av-badge-warning-bg: rgba(245,158,11,.15); --av-badge-warning-fg: #FCD34D; --av-badge-info-bg: rgba(59,130,246,.15); --av-badge-info-fg: #93C5FD; --av-badge-success-bg: rgba(16,185,129,.15); --av-badge-success-fg: #6EE7B7; --av-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --av-shadow-md: 0 4px 12px rgba(0,0,0,.5); --av-shadow-lg: 0 12px 32px rgba(0,0,0,.6); --av-shadow-focus: 0 0 0 3px rgba(77,102,232,.25); /* --- Sémantique (overrides dark) ----------------------------- */ --av-surface-overlay: rgba(0, 0, 0, .65); /* Les autres tokens sémantiques (surface-*, state-*, border-*) sont définis comme alias des primitives (--av-bg, --av-bg-soft, --av-brand-soft…), dont les valeurs dark sont déjà overridées ci-dessus. Le cascading fait le reste. */ } /* --- Tokens partagés (identiques light/dark) ------------------------------- */ :root { /* Accent décoratif (jamais pour actions) */ --av-accent: #9F2C82; /* États fonctionnels (couleurs pleines pour dots, indicateurs) */ --av-success: #10B981; --av-warning: #F59E0B; --av-error: #EF4444; --av-info: #3B82F6; /* Typographie */ --av-font: 'Avenir', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif; --av-font-mono: 'JetBrains Mono', 'Menlo', 'Courier New', monospace; --av-text-xs: 11px; --av-lh-xs: 14px; --av-text-sm: 12px; --av-lh-sm: 16px; --av-text-base: 14px; --av-lh-base: 20px; --av-text-md: 16px; --av-lh-md: 22px; --av-text-lg: 18px; --av-lh-lg: 26px; --av-text-xl: 22px; --av-lh-xl: 30px; --av-text-2xl: 28px; --av-lh-2xl: 36px; --av-text-3xl: 36px; --av-lh-3xl: 44px; --av-text-display: 48px; --av-lh-display: 56px; --av-w-light: 300; --av-w-roman: 400; --av-w-medium: 500; --av-w-bold: 700; --av-w-black: 900; /* Espacements (base 4 px) */ --av-space-1: 4px; --av-space-2: 8px; --av-space-3: 12px; --av-space-4: 16px; --av-space-5: 20px; --av-space-6: 24px; --av-space-8: 32px; --av-space-10: 40px; --av-space-12: 48px; --av-space-16: 64px; /* Rayons */ --av-radius-sm: 4px; --av-radius-md: 6px; --av-radius-lg: 8px; --av-radius-full: 9999px; /* Z-index */ --av-z-sidebar: 10; --av-z-topbar: 20; --av-z-modal: 100; --av-z-toast: 200; /* --- Motion : durées ------------------------------------------ */ --av-duration-instant: 80ms; /* micro feedback (toggle on/off, tick) */ --av-duration-quick: 150ms; /* hover, focus, color changes */ --av-duration-smooth: 220ms; /* drawer, dropdown, transform */ --av-duration-slow: 400ms; /* emphasis, large layout changes */ /* --- Motion : easings ----------------------------------------- */ --av-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* défaut UI */ --av-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* émergence forte */ --av-ease-decel: cubic-bezier(0, 0, 0.2, 1); /* sortie / entrée scène */ --av-ease-accel: cubic-bezier(0.4, 0, 1, 1); /* disparition rapide */ /* --- Motion : transitions composites (à utiliser tel quel) --- */ --av-trans-color: color var(--av-duration-quick) var(--av-ease-standard); --av-trans-bg: background-color var(--av-duration-quick) var(--av-ease-standard); --av-trans-border: border-color var(--av-duration-quick) var(--av-ease-standard); --av-trans-transform: transform var(--av-duration-quick) var(--av-ease-standard); --av-trans-shadow: box-shadow var(--av-duration-quick) var(--av-ease-standard); --av-trans-emphasis: var(--av-duration-smooth) var(--av-ease-emphasized); }