/* ============================================================ ViaPilot · Design System — tokens.css ------------------------------------------------------------ Source unique de vérité : toutes les valeurs visuelles sont déclarées ici comme custom properties. Aucun composant ne doit redéfinir un token. Tout fichier statique reste rendable sans build. ============================================================ */ :root { /* ============================================================ 01 · COULEUR — orange identitaire Octevia ------------------------------------------------------------ orange-500 EST le #FF9900 historique (point de calibration). L'échelle OKLCH garde la même teinte perçue et fait varier lightness + chroma. Utiliser : - 50/100 : fonds soft, badges discrets, hovers fins - 200 : bordures actives, dividers accentués - 300 : focus ring (rgba), états hover plats - 500 ★ : couleur de marque, puce CTA, accent dominant - 600 : hover sur 500 - 700 : texte orange sur fond clair (contraste AA) - 800/900 : texte sur fond très clair, accents profonds ============================================================ */ --orange-50: oklch(0.985 0.018 60); --orange-100: oklch(0.96 0.045 60); --orange-200: oklch(0.92 0.085 60); --orange-300: oklch(0.86 0.135 60); --orange-400: oklch(0.79 0.175 58); --orange-500: #FF9900; /* identité Octevia */ --orange-600: oklch(0.69 0.190 52); --orange-700: oklch(0.60 0.175 48); --orange-800: oklch(0.48 0.140 45); --orange-900: oklch(0.36 0.100 42); /* Alias legacy (compatibilité mockups non encore migrés) */ --octevia-orange: var(--orange-500); --octevia-orange-dark: var(--orange-700); --octevia-orange-soft: var(--orange-100); --octevia-peach: oklch(0.84 0.11 55); /* ============================================================ 02 · COULEUR — neutres chauds (ink) ------------------------------------------------------------ Undertone brun-orangé pour rester dans la famille du #FF9900. ink-900 = sidebar atténuée "noir espresso chaud" (A1). ============================================================ */ --ink-0: #FFFFFF; --ink-25: #FBFAF7; /* fond app */ --ink-50: #F5F3EE; /* fond bloc secondaire */ --ink-100: #EBE7DE; /* bordures, dividers */ --ink-200: #D9D3C5; /* bordures actives, séparateurs accentués */ --ink-300: #A8A398; /* texte désactivé, méta tertiaire */ --ink-400: #7B7770; /* texte muted, captions */ --ink-500: #4E4B46; /* texte secondaire */ --ink-700: #2A2823; /* texte body principal */ --ink-900: #1A1612; /* sidebar — noir espresso chaud */ --ink-1000: #0A0907; /* logo, états max-contrast */ /* Alias legacy */ --octevia-black: var(--ink-900); --octevia-text: var(--ink-700); --octevia-grey: var(--ink-300); --octevia-grey-2: var(--ink-100); --octevia-grey-3: var(--ink-50); --octevia-bg: var(--ink-0); --color-bg: var(--ink-25); --color-border: var(--ink-100); --color-text-muted: var(--ink-400); /* ============================================================ 03 · COULEUR — sémantique ------------------------------------------------------------ Chaque sémantique a 3 paliers : soft (fond), base (texte/icon), dark (texte sur soft, accents). ============================================================ */ --success-soft: #E5F4EB; --success-base: #1F8A4C; --success-dark: #15633A; --warning-soft: var(--orange-100); --warning-base: var(--orange-500); --warning-dark: var(--orange-700); --danger-soft: #FBE5E1; --danger-base: #B23A2A; --danger-dark: #842116; --info-soft: #DEEBF7; --info-base: #1F6FB8; --info-dark: #14517A; --purple-soft: #F3E2F0; --purple-base: #A33178; --purple-dark: #6E1F50; /* Alias legacy */ --color-success: var(--success-base); --color-warning: var(--warning-base); --color-danger: var(--danger-base); --color-info: var(--info-base); --color-purple: var(--purple-base); /* ============================================================ 04 · COULEUR — accents par module ------------------------------------------------------------ RÈGLE : l'accent module n'apparaît qu'en bordure gauche d'une card ou dans un badge module. Jamais en fond plein. L'orange reste la SEULE couleur autorisée à "peindre". ============================================================ */ --mod-viapilot: var(--orange-500); /* socle */ --mod-viaim: oklch(0.62 0.16 250); /* ITSM — bleu */ --mod-contract: oklch(0.55 0.13 200); /* contrats — teal profond */ --mod-asset: oklch(0.58 0.14 155); /* CMDB — vert */ --mod-watch: oklch(0.60 0.18 30); /* monitor — rouge orangé */ --mod-vault: oklch(0.50 0.16 290); /* coffre — violet */ --mod-bill: oklch(0.65 0.14 80); /* facture — miel */ --mod-quote: oklch(0.58 0.15 320); /* devis — magenta */ --mod-report: oklch(0.55 0.13 230); /* rapports — bleu profond */ --mod-project: oklch(0.55 0.12 130); /* projets — olive */ /* ============================================================ 05 · TYPOGRAPHIE ------------------------------------------------------------ Roboto pour tout, Roboto Mono pour les données techniques stables (IDs, IPs, hex, timestamps ISO, refs). ============================================================ */ --font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace; /* Scale (px) */ --t-10: 10px; --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; /* body */ --t-16: 16px; /* lead */ --t-18: 18px; --t-22: 22px; /* h2 */ --t-28: 28px; /* h1 page */ --t-36: 36px; /* display */ /* Line-heights */ --lh-tight: 1.15; /* display, headings serrés */ --lh-snug: 1.3; /* h2, h3 */ --lh-base: 1.5; /* body */ --lh-relax: 1.7; /* article long */ /* Weights — Roboto chargé en 300/400/500/700 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Letter-spacing */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; /* eyebrows, micro-labels */ --ls-widest: 0.14em; /* sidebar section labels */ /* ============================================================ 06 · ESPACEMENT ------------------------------------------------------------ Multiples de 4. Jamais d'autres valeurs en gap/margin/padding. ============================================================ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-18: 72px; --s-24: 96px; /* ============================================================ 07 · RAYONS ============================================================ */ --r-0: 0; --r-2: 2px; --r-3: 3px; /* code-inline, tags étroits */ --r-4: 4px; /* inputs, petits badges */ --r-6: 6px; /* boutons, alerts */ --r-8: 8px; /* cards */ --r-12: 12px; /* sticky bars, modals */ --r-16: 16px; /* hero blocks */ --r-pill: 9999px; /* badges pleins, tags chips */ /* ============================================================ 08 · ÉLÉVATION (ombres chaudes) ------------------------------------------------------------ Teinte rgba(15,14,12,…) au lieu du gris froid habituel. Chaque niveau combine ombre de contact + ombre de halo. ============================================================ */ --elev-0: none; --elev-1: 0 1px 0 rgba(15, 14, 12, 0.04), 0 1px 2px rgba(15, 14, 12, 0.04); --elev-2: 0 2px 4px rgba(15, 14, 12, 0.05), 0 8px 16px rgba(15, 14, 12, 0.06); --elev-3: 0 4px 8px rgba(15, 14, 12, 0.06), 0 16px 32px rgba(15, 14, 12, 0.08); --elev-4: 0 8px 16px rgba(15, 14, 12, 0.08), 0 32px 64px rgba(15, 14, 12, 0.14); /* Usage typique : elev-1 → cards static, KPI tiles elev-2 → dropdowns, popovers elev-3 → modals, command palette elev-4 → toasts au repos, drawer mobile */ /* ============================================================ 09 · MOTION ------------------------------------------------------------ Durées et easings tokenisés. Tous les composants doivent utiliser ces variables — jamais de valeur en dur. ============================================================ */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 260ms; --motion-slowest: 400ms; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1); --ease-emphasized: cubic-bezier(0.4, 0.0, 0, 1); /* ============================================================ 10 · Z-INDEX ------------------------------------------------------------ Échelle déterministe — interdiction d'inventer des z-index hors-tokens. ============================================================ */ --z-base: 1; --z-raised: 10; /* cards en focus, hover lift */ --z-sticky: 20; /* topbar, sticky bars */ --z-sidebar: 50; /* sidebar (au-dessus du sticky) */ --z-dropdown: 100; /* dropdowns, popovers */ --z-tooltip: 200; /* tooltips */ --z-toast: 1000; /* toasts */ --z-overlay: 8000; /* drawer mobile, backdrops doux */ --z-modal: 9000; /* modals */ --z-command: 9500; /* command palette */ --z-cookie: 9800; /* cookie banner */ --z-max: 10000; /* override exceptionnel */ /* ============================================================ 11 · LAYOUT (constantes) ============================================================ */ --layout-sidebar-w: 240px; --layout-sidebar-collapsed-w: 64px; --layout-topbar-h: 62px; --layout-content-max: 1320px; --layout-page-pad-x: 32px; --layout-page-pad-y: 28px; /* ============================================================ 12 · ACCESSIBILITÉ — focus ------------------------------------------------------------ Anneau orange semi-transparent visible sur tout fond. WCAG AA visuel garanti. ============================================================ */ --focus-ring: 0 0 0 3px oklch(0.745 0.198 56 / 0.35); --focus-ring-on-orange: 0 0 0 3px rgba(255, 255, 255, 0.6); --focus-outline-width: 2px; /* ============================================================ 13 · TOKENS DÉRIVÉS UTILES ============================================================ */ --surface-app: var(--ink-25); --surface-card: var(--ink-0); --surface-sunken: var(--ink-50); --surface-inverted: var(--ink-900); --text-strong: var(--ink-900); --text-default: var(--ink-700); --text-muted: var(--ink-400); --text-faint: var(--ink-300); --text-on-dark: #F5F3EE; --text-on-dark-muted: var(--ink-300); --border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-accent: var(--orange-300); --brand-accent: var(--orange-500); --brand-accent-hover: var(--orange-600); --brand-accent-text: var(--orange-700); /* ============================================================ 06 · DS MOBILE (EVO-063 SL 1.2) ------------------------------------------------------------ Tokens dédiés mobile, mappés sur la palette prod ViaTEMPO. Préfixe --m-* pour éviter toute collision avec les classes desktop. Activés via assets/styles/mobile-layout.css + mobile-components.css chargés en `media="(max-width: 767px)"`. ============================================================ */ /* Couleurs sémantiques — mappées sur les tokens prod */ --m-brand: var(--orange-500); --m-brand-strong: var(--orange-700); --m-brand-soft: var(--orange-100); --m-brand-line: var(--orange-300); --m-text: var(--ink-900); --m-text-muted: var(--ink-400); --m-text-onbrand: var(--ink-0); --m-bg: var(--ink-25); --m-surface: var(--ink-0); --m-border: var(--ink-100); --m-border-strong: var(--ink-200); --m-success: var(--success-base); --m-success-soft: var(--success-soft); --m-success-line: color-mix(in srgb, var(--success-base) 25%, transparent); --m-success-strong: var(--success-dark); --m-info: var(--info-base); --m-info-soft: var(--info-soft); --m-info-line: color-mix(in srgb, var(--info-base) 25%, transparent); --m-warning: var(--warning-base); --m-warning-soft: var(--warning-soft); --m-warning-line: var(--orange-300); --m-warning-strong: var(--orange-700); --m-danger: var(--danger-base); --m-danger-soft: var(--danger-soft); --m-danger-line: color-mix(in srgb, var(--danger-base) 25%, transparent); /* Sidebar / drawer (déjà géré par .app-sidebar prod, ces tokens servent aux composants .m-drawer* du DS si jamais utilisés hors du shell EVO-056). */ --m-drawer-bg: var(--ink-900); --m-drawer-hover: rgba(255, 255, 255, .08); --m-drawer-text: var(--ink-300); --m-drawer-muted: color-mix(in srgb, var(--ink-300) 50%, transparent); /* Spacing — échelle 4px */ --m-sp-0: 0; --m-sp-1: 4px; --m-sp-2: 8px; --m-sp-3: 12px; --m-sp-4: 16px; --m-sp-5: 20px; --m-sp-6: 24px; --m-sp-8: 32px; /* Radius */ --m-r-sm: 6px; --m-r-md: 8px; --m-r-lg: 10px; --m-r-xl: 14px; --m-r-pill: 9999px; /* Touch target (Apple HIG / Material) */ --m-touch: 44px; /* Typographie — Inter déjà chargée par DS prod, pas de re-import */ --m-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --m-fs-xs: 10.5px; /* labels uppercase, badges */ --m-fs-sm: 12px; /* meta, sub-labels */ --m-fs-base: 13.5px; /* texte courant */ --m-fs-md: 14px; /* inputs, buttons */ --m-fs-lg: 16px; /* titres section */ --m-fs-xl: 18px; /* titre page */ --m-fs-2xl: 22px; /* KPI dominant */ /* Defensive clamp (P1-5 audit) : grand nombre hero (133 j…) -- 34 px sur 320 px (iPhone SE 1ère gen), monte jusqu'à 40 px sur 380 px+. */ --m-fs-display: clamp(34px, 11vw, 40px); --m-lh-tight: 1.2; --m-lh-base: 1.4; --m-lh-loose: 1.6; --m-fw-regular: 400; --m-fw-medium: 500; --m-fw-semibold: 600; --m-fw-bold: 700; --m-fw-black: 900; /* Layers — z-index + hauteurs des couches sticky */ --m-h-topbar: 56px; --m-h-monthswitch: 52px; --m-h-bottombar: 64px; --m-z-topbar: 100; --m-z-monthswitch: 95; --m-z-bottombar: 90; --m-z-sheet: 200; --m-z-drawer: 300; --m-z-toast: 400; /* Shadows */ --m-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04); --m-shadow-bar: 0 -4px 12px rgba(0, 0, 0, 0.05); --m-shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.20); /* Animations */ --m-easing: cubic-bezier(0.2, 0.8, 0.2, 1); --m-dur-fast: 150ms; --m-dur-base: 220ms; } /* ============================================================ RESPECT prefers-reduced-motion ------------------------------------------------------------ Coupe transitions/animations non essentielles globalement. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-slowest: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }