/* css/tokens.css -------------------------------------------------------------------------- Systeme de design tokens de MimicGrid : source unique de verite pour les couleurs, la typographie, les espacements, les rayons et les tailles de zone tactile. Aucune autre feuille de style ne doit definir de valeur "en dur" (couleur hexadecimale, taille en px, etc.) : elle doit reference un token defini ici via var(--nom-du-token). Convention de nommage des tokens : --categorie-nom[-variante] (ex. --color-surface, --color-surface-raised, --space-4, --radius-lg). Theme clair/sombre : le theme par defaut suit la preference systeme (prefers-color-scheme). Un choix manuel (ecran Reglages) est applique via l'attribut data-theme="light" | "dark" pose sur , qui doit toujours prevaloir sur la preference systeme. -------------------------------------------------------------------------- */ :root { /* ------------------------------------------------------------------ */ /* Couleurs - palette brute (jamais utilisee directement hors de ce */ /* fichier ; sert uniquement a definir les tokens semantiques ci-dessous) */ /* ------------------------------------------------------------------ */ --palette-neutral-0: #ffffff; --palette-neutral-50: #f6f7f9; --palette-neutral-100: #eceef2; --palette-neutral-200: #d8dbe3; --palette-neutral-300: #b7bcc9; --palette-neutral-400: #8b91a3; --palette-neutral-500: #666c80; --palette-neutral-600: #4b5165; --palette-neutral-700: #363b4c; --palette-neutral-800: #23273a; --palette-neutral-900: #14162a; --palette-neutral-950: #0b0c19; --palette-emerald-400: #34c98e; /* ACCESSIBILITE (WCAG 1.4.3 Contraste minimum, voir ACCESSIBILITY_AUDIT.md) : #22a877 contre blanc ne donnait que 3.03:1, sous le seuil AA de 4.5:1 pour du texte normal - utilise par .results-scores__delta--positive (texte bold sur fond blanc) et .btn-secondary (texte blanc sur fond emerald). Fonce a #1a8661 : 4.55:1 contre blanc, meme teinte. */ --palette-emerald-500: #1a8661; --palette-emerald-600: #16875f; --palette-amber-400: #f5b942; --palette-amber-500: #e0a02a; --palette-red-400: #f16565; /* ACCESSIBILITE (WCAG 1.4.3 Contraste minimum, voir ACCESSIBILITY_AUDIT.md) : #dc3d3d contre blanc (--color-danger-contrast) ne donnait que 4.40:1, sous le seuil AA de 4.5:1 pour du texte normal - utilise par .screen-error (banniere d'erreur, texte non "grand texte") sur au moins 4 ecrans. Fonce legerement, meme teinte : 5.32:1 contre blanc. */ --palette-red-500: #cf2525; --palette-violet-400: #8b7bf0; --palette-violet-500: #6f5ce0; /* ------------------------------------------------------------------ */ /* Couleurs - tokens semantiques (mode clair, valeurs par defaut) */ /* ------------------------------------------------------------------ */ --color-bg: var(--palette-neutral-50); --color-surface: var(--palette-neutral-0); --color-surface-raised: var(--palette-neutral-0); --color-surface-sunken: var(--palette-neutral-100); --color-border: var(--palette-neutral-200); --color-border-strong: var(--palette-neutral-300); --color-text: var(--palette-neutral-900); --color-text-muted: var(--palette-neutral-500); --color-text-inverse: var(--palette-neutral-0); --color-text-disabled: var(--palette-neutral-300); --color-primary: var(--palette-violet-500); --color-primary-hover: var(--palette-violet-400); --color-primary-contrast: var(--palette-neutral-0); --color-accent: var(--palette-emerald-500); --color-accent-contrast: var(--palette-neutral-0); --color-success: var(--palette-emerald-500); --color-success-contrast: var(--palette-neutral-0); --color-warning: var(--palette-amber-500); --color-warning-contrast: var(--palette-neutral-900); --color-danger: var(--palette-red-500); --color-danger-contrast: var(--palette-neutral-0); --color-focus-ring: var(--palette-violet-500); --color-overlay: rgb(11 12 25 / 55%); /* ------------------------------------------------------------------ */ /* Typographie */ /* ------------------------------------------------------------------ */ /* Pile de polices systeme uniquement : aucune police distante n'est chargee (pas de dependance reseau, coherent avec l'exigence "aucune dependance externe hors client Supabase JS"). */ --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Echelle mobile-first : ces valeurs sont les tailles de base sur petit ecran. Les feuilles d'ecran peuvent les augmenter dans une media query desktop (voir css/base.css) mais ne doivent pas les redefinir ici. */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px - taille de base, evite le zoom auto iOS sur les inputs */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.375rem; /* 22px */ --font-size-2xl: 1.75rem; /* 28px */ --font-size-3xl: 2.25rem; /* 36px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ------------------------------------------------------------------ */ /* Espacements - grille de base 4px */ /* ------------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Marge de securite pour zones tactiles en bas d'ecran (encoches, barres de gestes iOS/Android). A utiliser avec env(safe-area-inset-*). */ --space-safe-top: env(safe-area-inset-top, 0px); --space-safe-bottom: env(safe-area-inset-bottom, 0px); --space-safe-left: env(safe-area-inset-left, 0px); --space-safe-right: env(safe-area-inset-right, 0px); /* ------------------------------------------------------------------ */ /* Rayons de bordure */ /* ------------------------------------------------------------------ */ --radius-sm: 0.25rem; /* 4px - badges, chips */ --radius-md: 0.5rem; /* 8px - champs, cartes de mot */ --radius-lg: 0.875rem; /* 14px - boutons, cartes */ --radius-xl: 1.25rem; /* 20px - panneaux, modales */ --radius-full: 999px; /* pastilles, avatars, boutons ronds */ /* ------------------------------------------------------------------ */ /* Tailles de zone tactile (accessibilite mobile) */ /* Reference : WCAG 2.5.5 (AAA) / Apple HIG - cible minimale 44x44px. */ /* ------------------------------------------------------------------ */ --touch-target-min: 44px; --touch-target-comfortable: 48px; --touch-target-spacing: var(--space-2); /* ecart mini entre deux cibles tactiles adjacentes */ /* ------------------------------------------------------------------ */ /* Elevation (ombres) - discretes, coherentes avec un theme sombre */ /* ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgb(11 12 25 / 8%); --shadow-md: 0 4px 12px rgb(11 12 25 / 12%); --shadow-lg: 0 12px 32px rgb(11 12 25 / 18%); /* ------------------------------------------------------------------ */ /* Transitions */ /* ------------------------------------------------------------------ */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ------------------------------------------------------------------ */ /* Empilement (z-index) - echelle centralisee pour eviter les conflits */ /* entre ecrans (voir js/core/router.js) et composants transverses. */ /* ------------------------------------------------------------------ */ --z-base: 0; --z-sticky-header: 10; --z-dropdown: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; /* ------------------------------------------------------------------ */ /* Layout - largeurs maximales de contenu */ /* ------------------------------------------------------------------ */ --layout-content-max-width: 20rem; --layout-modal-max-width: 20rem; /* ------------------------------------------------------------------ */ /* Points de rupture (documentaires uniquement : les media queries CSS */ /* ne peuvent pas lire les custom properties, ces valeurs doivent donc */ /* etre recopiees telles quelles dans les @media des autres fichiers). */ /* Approche mobile-first : les regles de base ciblent le mobile, les */ /* @media (min-width: ...) ajoutent les adaptations tablette/desktop. */ /* ------------------------------------------------------------------ */ --breakpoint-sm: 480px; /* grands mobiles */ --breakpoint-md: 768px; /* tablettes */ --breakpoint-lg: 1024px; /* desktop */ --breakpoint-xl: 1280px; /* grand desktop */ } /* ------------------------------------------------------------------ */ /* Theme sombre - active automatiquement selon la preference systeme */ /* ------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root { --color-bg: var(--palette-neutral-950); --color-surface: var(--palette-neutral-900); --color-surface-raised: var(--palette-neutral-800); --color-surface-sunken: var(--palette-neutral-950); --color-border: var(--palette-neutral-700); --color-border-strong: var(--palette-neutral-600); --color-text: var(--palette-neutral-50); --color-text-muted: var(--palette-neutral-400); --color-text-inverse: var(--palette-neutral-950); --color-text-disabled: var(--palette-neutral-600); --color-primary: var(--palette-violet-400); --color-primary-hover: var(--palette-violet-500); --color-primary-contrast: var(--palette-neutral-950); --color-accent: var(--palette-emerald-400); --color-accent-contrast: var(--palette-neutral-950); --color-success: var(--palette-emerald-400); --color-success-contrast: var(--palette-neutral-950); --color-warning: var(--palette-amber-400); --color-warning-contrast: var(--palette-neutral-950); --color-danger: var(--palette-red-400); --color-danger-contrast: var(--palette-neutral-950); --color-focus-ring: var(--palette-violet-400); --color-overlay: rgb(0 0 0 / 65%); --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 4px 12px rgb(0 0 0 / 36%); --shadow-lg: 0 12px 32px rgb(0 0 0 / 45%); } } /* ------------------------------------------------------------------ */ /* Override manuel du theme (ecran Reglages -> js/core/i18n.js et */ /* js/screens/settings.js posent data-theme sur ). Doit toujours */ /* l'emporter sur la preference systeme ci-dessus, d'ou l'ordre des */ /* regles et l'usage du selecteur [data-theme] plus specifique. */ /* ------------------------------------------------------------------ */ :root[data-theme="light"] { color-scheme: light; --color-bg: var(--palette-neutral-50); --color-surface: var(--palette-neutral-0); --color-surface-raised: var(--palette-neutral-0); --color-surface-sunken: var(--palette-neutral-100); --color-border: var(--palette-neutral-200); --color-border-strong: var(--palette-neutral-300); --color-text: var(--palette-neutral-900); --color-text-muted: var(--palette-neutral-500); --color-text-inverse: var(--palette-neutral-0); --color-text-disabled: var(--palette-neutral-300); --color-primary: var(--palette-violet-500); --color-primary-hover: var(--palette-violet-400); --color-primary-contrast: var(--palette-neutral-0); --color-accent: var(--palette-emerald-500); --color-accent-contrast: var(--palette-neutral-0); --color-success: var(--palette-emerald-500); --color-success-contrast: var(--palette-neutral-0); --color-warning: var(--palette-amber-500); --color-warning-contrast: var(--palette-neutral-900); --color-danger: var(--palette-red-500); --color-danger-contrast: var(--palette-neutral-0); --color-focus-ring: var(--palette-violet-500); --color-overlay: rgb(11 12 25 / 55%); } :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--palette-neutral-950); --color-surface: var(--palette-neutral-900); --color-surface-raised: var(--palette-neutral-800); --color-surface-sunken: var(--palette-neutral-950); --color-border: var(--palette-neutral-700); --color-border-strong: var(--palette-neutral-600); --color-text: var(--palette-neutral-50); --color-text-muted: var(--palette-neutral-400); --color-text-inverse: var(--palette-neutral-950); --color-text-disabled: var(--palette-neutral-600); --color-primary: var(--palette-violet-400); --color-primary-hover: var(--palette-violet-500); --color-primary-contrast: var(--palette-neutral-950); --color-accent: var(--palette-emerald-400); --color-accent-contrast: var(--palette-neutral-950); --color-success: var(--palette-emerald-400); --color-success-contrast: var(--palette-neutral-950); --color-warning: var(--palette-amber-400); --color-warning-contrast: var(--palette-neutral-950); --color-danger: var(--palette-red-400); --color-danger-contrast: var(--palette-neutral-950); --color-focus-ring: var(--palette-violet-400); --color-overlay: rgb(0 0 0 / 65%); } /* Respect de la preference de reduction de mouvement : les autres feuilles de style doivent s'appuyer sur ce token plutot que de dupliquer la media query. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }