/* ========================================================================== Habermas Media — Design tokens · v0.1 (à valider) -------------------------------------------------------------------------- Source unique de vérité pour couleur, typographie, espacement, rayons, mouvement et gabarits. Les composants (components.css) n'utilisent QUE des jetons sémantiques (--color-*, --space-*, …) : changer une valeur ici change tout le produit sans toucher au balisage. Thèmes : clair / sombre via light-dark(). Le thème suit le système, ou est forcé par . Densité : . ========================================================================== */ /* Ordre des couches : le polyfill Popover (couche « popover-polyfill », déclarée ici en premier) ne doit jamais l'emporter sur les composants ; une couche déclarée plus tard gagne, quelle que soit la spécificité. */ @layer popover-polyfill, hm-base, hm-components, hm-utilities; :root { color-scheme: light dark; /* ───────── Couleur · surfaces ───────── */ --color-bg: light-dark(#F6F5F1, #121211); /* fond d'application, papier */ --color-surface: light-dark(#FFFFFF, #1A1A18); /* panneaux, cartes, lignes */ --color-surface-2: light-dark(#F0EEE8, #222220); /* creux : en-têtes de table, champs désactivés */ --color-surface-hover: light-dark(#F4F2ED, #262623); --color-surface-selected: light-dark(#EEF0FC, #1D2247); --color-overlay: light-dark(rgb(23 22 19 / .48), rgb(0 0 0 / .64)); /* ───────── Couleur · bordures ───────── */ --color-border: light-dark(#E3E0D8, #2E2E2B); /* décoratif : séparateurs */ --color-border-strong: light-dark(#CBC7BC, #45453F); --color-border-control: light-dark(#85816F, #7E7B6B); /* champs et boutons : ≥ 3:1 (WCAG 1.4.11) */ /* ───────── Couleur · texte ───────── */ --color-text: light-dark(#1B1A17, #ECEBE6); --color-text-muted: light-dark(#55524A, #AAA79D); --color-text-subtle: light-dark(#67635A, #8F8C82); /* méta, placeholder — reste ≥ 4,5:1 */ /* ───────── Couleur · accent « outremer » ───────── */ --color-accent: light-dark(#2F42A8, #93A3FF); --color-accent-hover: light-dark(#25368F, #AAB7FF); --color-accent-active: light-dark(#1E2C75, #BFC9FF); --color-accent-soft: light-dark(#EEF0FC, #1B2147); --color-accent-soft-hover:light-dark(#E2E6FA, #232B5C); --color-accent-fg: light-dark(#25327F, #BCC6FF); /* texte posé sur accent-soft */ --color-on-accent: light-dark(#FFFFFF, #0E1233); /* texte posé sur accent plein */ --color-on-danger: light-dark(#FFFFFF, #2A0B07); /* texte posé sur danger plein */ --color-focus: light-dark(#2F42A8, #AAB7FF); /* ───────── Couleur · statuts (toujours texte + icône + couleur) ───────── */ --color-success-solid: light-dark(#1F7A4D, #4CC38A); --color-success-bg: light-dark(#E6F4EC, #12281D); --color-success-border: light-dark(#BCDFCB, #1F4A35); --color-success-fg: light-dark(#14583A, #93DFB8); --color-warning-solid: light-dark(#B06A00, #F0B440); --color-warning-bg: light-dark(#FDF3DD, #2C2108); --color-warning-border: light-dark(#EFD596, #54400F); --color-warning-fg: light-dark(#6E4400, #F5CE7E); --color-danger-solid: light-dark(#C0352B, #FF7A6E); --color-danger-bg: light-dark(#FCEBE9, #301512); --color-danger-border: light-dark(#F0C0BA, #5E2A25); --color-danger-fg: light-dark(#8A2820, #FFB4AC); --color-info-solid: var(--color-accent); --color-info-bg: var(--color-accent-soft); --color-info-border: light-dark(#CBD1F3, #2E376E); --color-info-fg: var(--color-accent-fg); --color-neutral-solid: light-dark(#7A766A, #A9A69C); --color-neutral-bg: light-dark(#EFEDE7, #262522); --color-neutral-border: light-dark(#DDD9CF, #3A3935); --color-neutral-fg: light-dark(#45423B, #CFCDC5); /* ───────── Couleur · cas particuliers (anciennement écrits en dur) ───────── */ --color-highlight: light-dark(#FBE9A6, #5A4A10); /* , correspondance de recherche */ --color-selection: light-dark(#CBD3FA, #34408F); /* ::selection */ --color-toast-success: light-dark(#7BE0AA, #137A4B); /* icônes posées sur le fond inversé des toasts */ --color-toast-warning: light-dark(#F5C463, #8F5A00); --color-toast-danger: light-dark(#FF9C92, #B3281E); /* ───────── Médias : une teinte (hue OKLCH) par média ───────── Un média = une valeur --media-h. Créer un média n'exige aucun CSS : . Le marqueur est un carré arrondi (jamais un rond, réservé aux statuts) et toujours accompagné du nom : la couleur est un repère secondaire. */ --media-h-universitaire: 195; --media-h-femmes: 340; --media-h-scolaire: 78; --media-h-entreprise: 262; /* Habermas Media lui-même, proche de l'accent */ /* ───────── Typographie ───────── */ --font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Newsreader Variable", "Newsreader", Georgia, "Times New Roman", serif; /* marque et moments éditoriaux seulement */ /* Échelle courte (6 pas). Corps = 15 px : jamais réduit pour « faire tenir ». */ --text-xs: 0.75rem; /* 12 · badges, légendes, kbd */ --text-sm: 0.8125rem; /* 13 · méta, en-têtes de colonne, aide */ --text-base: 0.9375rem; /* 15 · texte courant, lignes de liste, champs */ --text-lg: 1.125rem; /* 18 · titres de section, panneaux */ --text-xl: 1.375rem; /* 22 · titre de page */ --text-2xl: 1.75rem; /* 28 · titre d'écran « Aujourd'hui », chiffres clés */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.55; --tracking-tight: -0.011em; --tracking-caps: 0.06em; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; /* ───────── Espacement (base 4 px) ───────── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ───────── Rayons, bordures, élévation ───────── */ --radius-xs: 4px; --radius-sm: 6px; /* champs, boutons */ --radius-md: 8px; /* cartes, lignes sélectionnées */ --radius-lg: 12px; /* panneaux, dialogues */ --radius-pill: 999px; --border: 1px solid var(--color-border); --border-control: 1px solid var(--color-border-control); /* Pas d'ombre sur les surfaces au repos : bordure fine. Ombre = ce qui flotte. */ --shadow-float: 0 1px 2px rgb(23 22 19 / .06), 0 8px 24px rgb(23 22 19 / .12); --shadow-dialog: 0 2px 6px rgb(23 22 19 / .08), 0 24px 56px rgb(23 22 19 / .22); /* ───────── Mouvement ───────── */ --ease: cubic-bezier(.2, .0, .0, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* ───────── Gabarits ───────── */ --sidebar-w: 15.5rem; /* 248 */ --sidebar-w-rail: 4.25rem; /* 68, tablette */ --topbar-h: 3.5rem; /* 56 */ --tabbar-h: 4rem; /* 64, mobile */ --page-pad: var(--space-6); --content-max: 80rem; /* 1280 */ --aside-w: 22rem; /* panneau secondaire de fiche */ /* ───────── Contrôles et densité ───────── */ --control-h-sm: 2rem; /* 32 */ --control-h: 2.25rem; /* 36 */ --control-h-lg: 2.75rem; /* 44 */ --row-h: 3.25rem; /* 52 · confortable (défaut) */ --row-pad-y: var(--space-3); --hit-min: 2.75rem; /* 44 · cible tactile minimale */ /* ───────── Z-index ───────── */ --z-sticky: 20; --z-sidebar: 40; --z-popover: 60; --z-dialog: 80; --z-toast: 100; } /* Thème forcé */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Ombres plus profondes en sombre */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-float: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .5); --shadow-dialog: 0 2px 6px rgb(0 0 0 / .4), 0 24px 56px rgb(0 0 0 / .6); } } :root[data-theme="dark"] { --shadow-float: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .5); --shadow-dialog: 0 2px 6px rgb(0 0 0 / .4), 0 24px 56px rgb(0 0 0 / .6); } /* Densité compacte : listes de milliers de pistes */ :root[data-density="compact"] { --row-h: 2.5rem; /* 40 */ --row-pad-y: var(--space-2); --control-h: 2rem; } /* Écrans tactiles : les cibles ne descendent jamais sous 44 px */ @media (pointer: coarse) { :root { --control-h-sm: var(--hit-min); --control-h: var(--hit-min); --row-h: 3.5rem; } :root[data-density="compact"] { --row-h: 3rem; } } /* Mobile : marges réduites, corps jamais réduit */ @media (max-width: 720px) { :root { --page-pad: var(--space-4); } } /* Réduction des animations */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }