/* ============================================================ MentivisOS - Design Tokens (v0.23.0) Source : design-darkmode.md + design-lightmode.md (graphiste). Light-first avec dark mode via prefers-color-scheme + override [data-theme="light"|"dark"] sur . ============================================================ */ /* ---------- Fonts Geist (locales si dispo, sinon CDN) ---------- */ /* La fonction url() est essayee en premier ; en cas d echec le browser tombera silencieusement sur la pile fallback (Inter, system, etc.). */ /* ============================================================ LIGHT MODE (defaut) ============================================================ */ :root { /* === Backgrounds === */ --ds-bg-100: #ffffff; --ds-bg-200: #fafafa; --ds-bg-300: #f5f5f5; --ds-bg-400: #efefef; /* === Gray scale === */ --ds-gray-100: #f7f7f7; --ds-gray-200: #efefef; --ds-gray-300: #e5e5e5; --ds-gray-400: #d4d4d4; --ds-gray-500: #b0b0b0; --ds-gray-600: #8a8a8a; --ds-gray-700: #6b6b6b; --ds-gray-800: #525252; --ds-gray-900: #3d3d3d; --ds-gray-1000: #171717; /* === Blue (accent primaire, focus, liens) === */ --ds-blue-100: #eff6ff; --ds-blue-200: #dbeafe; --ds-blue-300: #bfdbfe; --ds-blue-400: #93c5fd; --ds-blue-500: #60a5fa; --ds-blue-600: #3b82f6; --ds-blue-700: #0078d4; --ds-blue-800: #0061b3; --ds-blue-900: #004a8c; --ds-blue-1000: #003366; /* === Red (erreurs, destructif) === */ --ds-red-100: #fef2f2; --ds-red-200: #fee2e2; --ds-red-300: #fecaca; --ds-red-400: #fca5a5; --ds-red-500: #f87171; --ds-red-600: #ef4444; --ds-red-700: #d03131; --ds-red-800: #b91c1c; --ds-red-900: #991b1b; --ds-red-1000: #7f1d1d; /* === Amber (warnings) === */ --ds-amber-100: #fffbeb; --ds-amber-200: #fef3c7; --ds-amber-300: #fde68a; --ds-amber-400: #fcd34d; --ds-amber-500: #fbbf24; --ds-amber-600: #f59e0b; --ds-amber-700: #d97706; --ds-amber-800: #b45309; --ds-amber-900: #92400e; --ds-amber-1000: #78350f; /* === Green (success) === */ --ds-green-100: #f0fdf4; --ds-green-200: #dcfce7; --ds-green-300: #bbf7d0; --ds-green-400: #86efac; --ds-green-500: #4ade80; --ds-green-600: #22c55e; --ds-green-700: #16a34a; --ds-green-800: #15803d; --ds-green-900: #166534; --ds-green-1000: #14532d; /* === Teal === */ --ds-teal-100: #f0fdfa; --ds-teal-200: #ccfbf1; --ds-teal-300: #99f6e4; --ds-teal-400: #5eead4; --ds-teal-500: #2dd4bf; --ds-teal-600: #14b8a6; --ds-teal-700: #0d9488; --ds-teal-800: #0f766e; --ds-teal-900: #115e59; --ds-teal-1000: #134e4a; /* === Purple === */ --ds-purple-100: #faf5ff; --ds-purple-200: #f3e8ff; --ds-purple-300: #e9d5ff; --ds-purple-400: #d8b4fe; --ds-purple-500: #c084fc; --ds-purple-600: #a855f7; --ds-purple-700: #9333ea; --ds-purple-800: #7e22ce; --ds-purple-900: #6b21a8; --ds-purple-1000: #581c87; /* === Pink === */ --ds-pink-100: #fdf2f8; --ds-pink-200: #fce7f3; --ds-pink-300: #fbcfe8; --ds-pink-400: #f9a8d4; --ds-pink-500: #f472b6; --ds-pink-600: #ec4899; --ds-pink-700: #db2777; --ds-pink-800: #be185d; --ds-pink-900: #9d174d; --ds-pink-1000: #831843; /* === Semantic === */ --ds-success: var(--ds-green-700); --ds-warning: var(--ds-amber-700); --ds-error: var(--ds-red-700); --ds-info: var(--ds-blue-700); /* === Text hierarchy === */ --ds-text-primary: var(--ds-gray-1000); --ds-text-secondary: var(--ds-gray-800); --ds-text-tertiary: var(--ds-gray-600); --ds-text-disabled: var(--ds-gray-500); --ds-text-inverse: #ffffff; --ds-text-on-accent: #ffffff; /* === Composants configurables (super-admin) : bandeau + boutons === Tokens dedies (pilotables clair+sombre via ThemeDefaults) pour ne PAS dependre de --m-ink / --m-bg-soft qui s'inversent mal en dark. */ --ds-header-bg: #ffffff; --ds-header-text: #171717; --ds-btn-bg: #171717; --ds-btn-text: #ffffff; --ds-btn-bg-hover: #3d3d3d; --ds-btn-text-hover: #ffffff; /* Boutons secondaires (.btn-secondary) : gris a bordure, repos + survol. */ --ds-btn2-bg: #ffffff; --ds-btn2-text: #171717; --ds-btn2-bg-hover: #fafafa; --ds-btn2-text-hover: #171717; /* Boutons flottants (FAB) : 1 couleur reglable par bouton (solide, OK clair+dark). Defauts = couleurs actuelles (assistant/recherche/feedback = bleu primaire, bloc-notes = or) ; l'admin peut ensuite les differencier. */ --ds-fab-assistant: #0078d4; --ds-prof: #7c3aed; /* === Palettes "choix utilisateur" (surlignages, sections, annotations) === */ /* Guide de demarrage (onboarding) */ --ds-onboarding: #0078d4; /* Surlignages */ --ds-hl-jaune: #fef9c3; --ds-hl-vert: #dcfce7; --ds-hl-bleu: #dbeafe; --ds-hl-rouge: #fee2e2; --ds-hl-orange: #ffedd5; --ds-hl-rose: #fce7f3; --ds-hl-noir: #e5e7eb; /* Sections */ --ds-section-jaune: #fef3c7; --ds-section-vert: #d1fae5; --ds-section-bleu: #dbeafe; --ds-section-rose: #fce7f3; --ds-section-mauve: #ede9fe; --ds-section-peche: #fed7aa; --ds-section-grisbleu: #e0f2fe; --ds-section-jaune-border: #fbbf24; --ds-section-vert-border: #34d399; --ds-section-bleu-border: #60a5fa; --ds-section-rose-border: #f472b6; --ds-section-mauve-border: #a78bfa; --ds-section-peche-border: #fb923c; --ds-section-grisbleu-border: #7dd3fc; /* Annotations */ --ds-annot-rouge: #dc2626; --ds-annot-bleu: #2563eb; --ds-annot-vert: #16a34a; --ds-annot-jaune: #eab308; --ds-annot-orange: #ea580c; --ds-annot-rose: #ec4899; --ds-annot-noir: #1f2937; --ds-fab-recherche: #0078d4; --ds-fab-feedback: #0078d4; --ds-fab-blocnotes: #f0b400; /* === Border === */ --ds-border-default: var(--ds-gray-300); --ds-border-hover: var(--ds-gray-400); --ds-border-active: var(--ds-gray-500); --ds-border-focus: var(--ds-blue-700); --ds-border-error: var(--ds-red-700); --ds-border-success: var(--ds-green-700); /* === Fonts === */ --ds-font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --ds-font-mono: 'Geist Mono', 'JetBrains Mono', SFMono-Regular, 'Roboto Mono', Menlo, Monaco, Consolas, monospace; /* === Type scale (composite : size weight line-height letter-spacing) === */ /* Headings */ --ds-heading-72: 700 72px/1.00 var(--ds-font-sans); --ds-heading-64: 700 64px/1.00 var(--ds-font-sans); --ds-heading-56: 600 56px/1.05 var(--ds-font-sans); --ds-heading-48: 600 48px/1.10 var(--ds-font-sans); --ds-heading-40: 600 40px/1.15 var(--ds-font-sans); --ds-heading-32: 600 32px/1.20 var(--ds-font-sans); --ds-heading-24: 600 24px/1.30 var(--ds-font-sans); --ds-heading-20: 600 20px/1.35 var(--ds-font-sans); --ds-heading-16: 600 16px/1.40 var(--ds-font-sans); --ds-heading-14: 600 14px/1.45 var(--ds-font-sans); /* Copy */ --ds-copy-24: 400 24px/1.50 var(--ds-font-sans); --ds-copy-20: 400 20px/1.55 var(--ds-font-sans); --ds-copy-18: 400 18px/1.60 var(--ds-font-sans); --ds-copy-16: 400 16px/1.60 var(--ds-font-sans); --ds-copy-14: 400 14px/1.55 var(--ds-font-sans); --ds-copy-13: 400 13px/1.50 var(--ds-font-sans); --ds-copy-14-mono: 400 14px/1.55 var(--ds-font-mono); --ds-copy-13-mono: 400 13px/1.50 var(--ds-font-mono); /* Labels */ --ds-label-20: 400 20px/1.35 var(--ds-font-sans); --ds-label-18: 400 18px/1.35 var(--ds-font-sans); --ds-label-16: 400 16px/1.40 var(--ds-font-sans); --ds-label-14: 400 14px/1.40 var(--ds-font-sans); --ds-label-13: 400 13px/1.35 var(--ds-font-sans); --ds-label-12: 400 12px/1.30 var(--ds-font-sans); --ds-label-14-mono: 400 14px/1.40 var(--ds-font-mono); --ds-label-13-mono: 400 13px/1.35 var(--ds-font-mono); --ds-label-12-mono: 400 12px/1.30 var(--ds-font-mono); /* Buttons */ --ds-button-16: 500 16px/1.20 var(--ds-font-sans); --ds-button-14: 500 14px/1.20 var(--ds-font-sans); --ds-button-12: 500 12px/1.15 var(--ds-font-sans); /* === Spacing (grille 4px) === */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-20: 80px; --ds-space-24: 96px; /* === Breakpoints (en utilitaire CSS, pas pour @media) === */ --ds-bp-sm: 40.0625em; /* 641px */ --ds-bp-md: 60.0625em; /* 961px */ --ds-bp-lg: 90.0625em; /* 1441px */ --ds-bp-xl: 100.0625em; /* 1601px */ --ds-bp-2xl: 112.0625em; /* 1793px */ /* === Layout === */ --ds-layout-max: 1200px; --ds-layout-padding: clamp(16px, 4vw, 64px); /* === Radius === */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-full: 9999px; /* === Shadows (light) === */ --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --ds-shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --ds-shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --ds-shadow-xl: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04); /* === Motion === */ --ds-duration-fast: 100ms; --ds-duration-normal: 200ms; --ds-duration-slow: 300ms; --ds-easing-default: cubic-bezier(0.175, 0.885, 0.32, 1.1); --ds-easing-linear: cubic-bezier(0, 0, 1, 1); /* === Icon sizes === */ --ds-icon-xs: 16px; --ds-icon-sm: 20px; --ds-icon-md: 24px; --ds-icon-lg: 32px; } /* ============================================================ DARK MODE 1. Active par defaut si l'OS l'indique (@media prefers-color-scheme). 2. Forcable explicitement via [data-theme="dark"] sur . 3. Override inverse : [data-theme="light"] force le light meme si OS=dark. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Backgrounds */ --ds-bg-100: #0a0a0b; --ds-bg-200: #121213; --ds-bg-300: #1a1a1b; --ds-bg-400: #242428; /* Gray scale (inverse) */ --ds-gray-100: #141416; --ds-gray-200: #1c1c1f; --ds-gray-300: #242428; --ds-gray-400: #2e2e32; --ds-gray-500: #3d3d42; --ds-gray-600: #52525b; --ds-gray-700: #6b6b76; --ds-gray-800: #8b8b98; --ds-gray-900: #b0b0bb; --ds-gray-1000: #e8e8ed; /* Blue dark */ --ds-blue-100: #0d1421; --ds-blue-200: #111e33; --ds-blue-300: #0f2847; --ds-blue-400: #0d355d; --ds-blue-500: #0d4880; --ds-blue-600: #0a5fa8; --ds-blue-700: #0078d4; --ds-blue-800: #3195e8; --ds-blue-900: #64b4f5; --ds-blue-1000: #b8dafc; /* Red dark */ --ds-red-100: #1f1010; --ds-red-200: #2d1515; --ds-red-300: #3e1a1a; --ds-red-400: #521e1e; --ds-red-500: #6b2323; --ds-red-600: #8a2a2a; --ds-red-700: #d03131; --ds-red-800: #e85454; --ds-red-900: #f08383; --ds-red-1000: #fcc0c0; /* Amber dark */ --ds-amber-100: #1e1708; --ds-amber-200: #2d220d; --ds-amber-300: #3e2f12; --ds-amber-400: #523e17; --ds-amber-500: #6b511e; --ds-amber-600: #8a6b28; --ds-amber-700: #d4a030; --ds-amber-800: #e8b84a; --ds-amber-900: #f0cf78; --ds-amber-1000: #fce7b8; /* Green dark */ --ds-green-100: #0c1a0e; --ds-green-200: #102813; --ds-green-300: #15381a; --ds-green-400: #194a21; --ds-green-500: #1f602b; --ds-green-600: #267d37; --ds-green-700: #30a64a; --ds-green-800: #4cc464; --ds-green-900: #7ddb8f; --ds-green-1000: #b8f0c2; /* Teal dark */ --ds-teal-100: #091d1a; --ds-teal-200: #0d2d28; --ds-teal-300: #103d37; --ds-teal-400: #134f47; --ds-teal-500: #17665b; --ds-teal-600: #1c8274; --ds-teal-700: #24a894; --ds-teal-800: #3cc9b4; --ds-teal-900: #6ddfcf; --ds-teal-1000: #b0f0e6; /* Purple dark */ --ds-purple-100: #160d1f; --ds-purple-200: #21142e; --ds-purple-300: #2e1b40; --ds-purple-400: #3c2354; --ds-purple-500: #4d2d6b; --ds-purple-600: #623b87; --ds-purple-700: #7c4dab; --ds-purple-800: #9770c9; --ds-purple-900: #b899e0; --ds-purple-1000: #dccaf0; /* Pink dark */ --ds-pink-100: #1f0d1a; --ds-pink-200: #2d1426; --ds-pink-300: #3e1b33; --ds-pink-400: #522342; --ds-pink-500: #6b2d55; --ds-pink-600: #8a3a6d; --ds-pink-700: #d04a8a; --ds-pink-800: #e86da6; --ds-pink-900: #f099c2; --ds-pink-1000: #fcc8df; /* Semantic dark (mappings ajustes par le DS dark) */ --ds-success: var(--ds-green-700); --ds-warning: var(--ds-amber-700); --ds-error: var(--ds-red-700); --ds-info: var(--ds-blue-700); /* Text dark */ /* v0.37.x : contraste releve en dark. Les textes secondaire/tertiaire pointaient sur gray-800/gray-600 (#8b8b98 / #52525b), illisibles sur le fond quasi-noir #0a0a0b (le tertiaire sert pourtant a .t-lead, .t-eyebrow, .text-muted, sous-titres de cartes...). On remonte d un cran tout en gardant la hierarchie primary > secondary > tertiary (WCAG AA respecte). */ --ds-text-primary: var(--ds-gray-1000); --ds-text-secondary: var(--ds-gray-900); --ds-text-tertiary: var(--ds-gray-800); --ds-text-disabled: var(--ds-gray-600); --ds-text-inverse: #000000; --ds-text-on-accent: #ffffff; /* Composants configurables : bandeau + boutons (dark) */ --ds-header-bg: #16161a; --ds-header-text: #e8e8ed; --ds-btn-bg: #e8e8ed; --ds-btn-text: #171717; --ds-btn-bg-hover: #c9c9d2; --ds-btn-text-hover: #171717; --ds-btn2-bg: #0a0a0b; --ds-btn2-text: #e8e8ed; --ds-btn2-bg-hover: #121213; --ds-btn2-text-hover: #e8e8ed; /* Boutons flottants (FAB) en dark : reglables separement du clair. */ --ds-fab-assistant: #0078d4; --ds-prof: #7c3aed; /* === Palettes "choix utilisateur" (surlignages, sections, annotations) === */ /* Guide de demarrage (onboarding) */ --ds-onboarding: #0078d4; /* Surlignages */ --ds-hl-jaune: #423d12; --ds-hl-vert: #13301f; --ds-hl-bleu: #16304d; --ds-hl-rouge: #45191a; --ds-hl-orange: #40260f; --ds-hl-rose: #3d1a2e; --ds-hl-noir: #2c2c31; /* Sections */ --ds-section-jaune: #3d3312; --ds-section-vert: #123024; --ds-section-bleu: #16304d; --ds-section-rose: #3d1a2e; --ds-section-mauve: #241f3d; --ds-section-peche: #40270f; --ds-section-grisbleu: #12283a; --ds-section-jaune-border: #6b5a1f; --ds-section-vert-border: #1e5540; --ds-section-bleu-border: #2a5580; --ds-section-rose-border: #6b2f4f; --ds-section-mauve-border: #453a6b; --ds-section-peche-border: #6b3f1a; --ds-section-grisbleu-border: #2a4a63; /* Annotations */ --ds-annot-rouge: #f87171; --ds-annot-bleu: #60a5fa; --ds-annot-vert: #4ade80; --ds-annot-jaune: #fde047; --ds-annot-orange: #fb923c; --ds-annot-rose: #f472b6; --ds-annot-noir: #9ca3af; --ds-fab-recherche: #0078d4; --ds-fab-feedback: #0078d4; --ds-fab-blocnotes: #f0b400; /* Border dark */ --ds-border-default: var(--ds-gray-300); --ds-border-hover: var(--ds-gray-400); --ds-border-active: var(--ds-gray-500); --ds-border-focus: var(--ds-blue-700); --ds-border-error: var(--ds-red-700); --ds-border-success: var(--ds-green-700); /* Shadows dark */ --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --ds-shadow-md: 0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --ds-shadow-lg: 0 4px 16px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); --ds-shadow-xl: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3); } } /* Override explicite : l'utilisateur force le dark mode */ :root[data-theme="dark"] { /* Composants configurables : bandeau + boutons (dark) */ --ds-header-bg: #16161a; --ds-header-text: #e8e8ed; --ds-btn-bg: #e8e8ed; --ds-btn-text: #171717; --ds-btn-bg-hover: #c9c9d2; --ds-btn-text-hover: #171717; --ds-btn2-bg: #0a0a0b; --ds-btn2-text: #e8e8ed; --ds-btn2-bg-hover: #121213; --ds-btn2-text-hover: #e8e8ed; /* Boutons flottants (FAB) en dark : reglables separement du clair. */ --ds-fab-assistant: #0078d4; --ds-prof: #7c3aed; /* === Palettes "choix utilisateur" (surlignages, sections, annotations) === */ /* Guide de demarrage (onboarding) */ --ds-onboarding: #0078d4; /* Surlignages */ --ds-hl-jaune: #423d12; --ds-hl-vert: #13301f; --ds-hl-bleu: #16304d; --ds-hl-rouge: #45191a; --ds-hl-orange: #40260f; --ds-hl-rose: #3d1a2e; --ds-hl-noir: #2c2c31; /* Sections */ --ds-section-jaune: #3d3312; --ds-section-vert: #123024; --ds-section-bleu: #16304d; --ds-section-rose: #3d1a2e; --ds-section-mauve: #241f3d; --ds-section-peche: #40270f; --ds-section-grisbleu: #12283a; --ds-section-jaune-border: #6b5a1f; --ds-section-vert-border: #1e5540; --ds-section-bleu-border: #2a5580; --ds-section-rose-border: #6b2f4f; --ds-section-mauve-border: #453a6b; --ds-section-peche-border: #6b3f1a; --ds-section-grisbleu-border: #2a4a63; /* Annotations */ --ds-annot-rouge: #f87171; --ds-annot-bleu: #60a5fa; --ds-annot-vert: #4ade80; --ds-annot-jaune: #fde047; --ds-annot-orange: #fb923c; --ds-annot-rose: #f472b6; --ds-annot-noir: #9ca3af; --ds-fab-recherche: #0078d4; --ds-fab-feedback: #0078d4; --ds-fab-blocnotes: #f0b400; --ds-bg-100: #0a0a0b; --ds-bg-200: #121213; --ds-bg-300: #1a1a1b; --ds-bg-400: #242428; --ds-gray-100: #141416; --ds-gray-200: #1c1c1f; --ds-gray-300: #242428; --ds-gray-400: #2e2e32; --ds-gray-500: #3d3d42; --ds-gray-600: #52525b; --ds-gray-700: #6b6b76; --ds-gray-800: #8b8b98; --ds-gray-900: #b0b0bb; --ds-gray-1000: #e8e8ed; --ds-blue-100: #0d1421; --ds-blue-200: #111e33; --ds-blue-300: #0f2847; --ds-blue-400: #0d355d; --ds-blue-500: #0d4880; --ds-blue-600: #0a5fa8; --ds-blue-700: #0078d4; --ds-blue-800: #3195e8; --ds-blue-900: #64b4f5; --ds-blue-1000: #b8dafc; --ds-red-100: #1f1010; --ds-red-200: #2d1515; --ds-red-300: #3e1a1a; --ds-red-400: #521e1e; --ds-red-500: #6b2323; --ds-red-600: #8a2a2a; --ds-red-700: #d03131; --ds-red-800: #e85454; --ds-red-900: #f08383; --ds-red-1000: #fcc0c0; --ds-amber-100: #1e1708; --ds-amber-200: #2d220d; --ds-amber-300: #3e2f12; --ds-amber-400: #523e17; --ds-amber-500: #6b511e; --ds-amber-600: #8a6b28; --ds-amber-700: #d4a030; --ds-amber-800: #e8b84a; --ds-amber-900: #f0cf78; --ds-amber-1000: #fce7b8; --ds-green-100: #0c1a0e; --ds-green-200: #102813; --ds-green-300: #15381a; --ds-green-400: #194a21; --ds-green-500: #1f602b; --ds-green-600: #267d37; --ds-green-700: #30a64a; --ds-green-800: #4cc464; --ds-green-900: #7ddb8f; --ds-green-1000: #b8f0c2; --ds-teal-100: #091d1a; --ds-teal-200: #0d2d28; --ds-teal-300: #103d37; --ds-teal-400: #134f47; --ds-teal-500: #17665b; --ds-teal-600: #1c8274; --ds-teal-700: #24a894; --ds-teal-800: #3cc9b4; --ds-teal-900: #6ddfcf; --ds-teal-1000: #b0f0e6; --ds-purple-100: #160d1f; --ds-purple-200: #21142e; --ds-purple-300: #2e1b40; --ds-purple-400: #3c2354; --ds-purple-500: #4d2d6b; --ds-purple-600: #623b87; --ds-purple-700: #7c4dab; --ds-purple-800: #9770c9; --ds-purple-900: #b899e0; --ds-purple-1000: #dccaf0; --ds-pink-100: #1f0d1a; --ds-pink-200: #2d1426; --ds-pink-300: #3e1b33; --ds-pink-400: #522342; --ds-pink-500: #6b2d55; --ds-pink-600: #8a3a6d; --ds-pink-700: #d04a8a; --ds-pink-800: #e86da6; --ds-pink-900: #f099c2; --ds-pink-1000: #fcc8df; --ds-text-inverse: #000000; /* v0.37.x : memes textes que le bloc dark auto (sinon ils heritent de :root = gray-800/gray-600 et redeviennent illisibles sur le fond quasi-noir). */ --ds-text-primary: var(--ds-gray-1000); --ds-text-secondary: var(--ds-gray-900); --ds-text-tertiary: var(--ds-gray-800); --ds-text-disabled: var(--ds-gray-600); --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --ds-shadow-md: 0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --ds-shadow-lg: 0 4px 16px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); --ds-shadow-xl: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3); } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --ds-duration-fast: 1ms; --ds-duration-normal: 1ms; --ds-duration-slow: 1ms; } } /* ============================================================ Selection + focus ring (utilitaires globaux du DS) ============================================================ */ ::selection { background: var(--ds-blue-700); color: #ffffff; } :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ds-bg-100), 0 0 0 4px var(--ds-blue-700); }