/* ============================================================ Seniority Connect — Design Tokens Source unique de verite pour couleurs, typo, spacing, etc. Palette WCAG AAA (cible 75 ans, vue declinant). Tous les tokens texte/UI principaux respectent un contraste >= 7:1 sur le fond correspondant (4.5:1 sur large text uniquement pour les tokens decoratifs explicitement signales). ============================================================ */ :root { /* === NEUTRAL / BACKGROUND === */ --color-bg: #ffffff; --color-bg-elevated: #ffffff; /* surface surélevée (cartes/modales flottantes) */ --color-bg-subtle: #f9fafb; /* gray-50 */ --color-bg-muted: #f3f4f6; /* gray-100 */ --color-bg-app: #f8f6f3; --color-bg-warm: #fffbf7; /* warm white pour landing */ --color-border: #d1d5db; /* gray-300 */ --color-border-strong: #9ca3af; /* gray-400, separations renforcees */ /* === TEXTE === */ --color-text: #111827; /* gray-900, 17.74:1 sur blanc — AAA */ --color-text-secondary:#1f2937; /* gray-800, 15.30:1 sur blanc — AAA */ --color-text-muted: #4b5563; /* gray-600, 7.56:1 sur blanc — AAA */ --color-text-decorative:#6b7280; /* gray-500, 4.69:1 — AA seulement (badges/icones decoratifs) */ /* === PRIMARY (bleu) === */ --color-primary: #1e40af; /* blue-800, 8.59:1 sur blanc — AAA */ --color-primary-hover: #1e3a8a; /* blue-900 */ --color-primary-soft: #dbeafe; /* blue-100 — fond leger */ --color-primary-bg: #eff6ff; /* blue-50 — fond tres leger */ --color-primary-ring: rgba(30,64,175,0.22); /* === SUCCESS (vert) === */ --color-success: #047857; /* emerald-700, 7.50:1 sur blanc — AAA */ --color-success-hover: #065f46; /* emerald-800 */ --color-success-soft: #d1fae5; /* emerald-100 */ --color-success-bg: #ecfdf5; /* emerald-50 */ /* === WARNING (ambre) === */ --color-warning: #b45309; /* amber-700, 7.46:1 sur blanc — AAA */ --color-warning-hover: #92400e; /* amber-800 */ --color-warning-soft: #fef3c7; /* amber-100 */ --color-warning-bg: #fffbeb; /* amber-50 */ /* === ERROR / DANGER (rouge) === */ --color-error: #b91c1c; /* red-700, 7.22:1 sur blanc — AAA */ --color-error-hover: #991b1b; /* red-800 */ --color-error-soft: #fee2e2; /* red-100 */ --color-error-bg: #fef2f2; /* red-50 */ /* === INFO === */ --color-info: #1e3a8a; /* blue-900, 11.95:1 sur blanc — AAA */ --color-info-hover: #172554; /* blue-950 */ --color-info-soft: #dbeafe; /* blue-100 */ --color-info-bg: #eff6ff; /* blue-50 */ /* === ACCENT (orange brand) === */ --color-accent: #b94a22; /* orange brand fonce, 5.33:1 sur blanc — AA, AAA en large text */ --color-accent-hover: #9a3d1c; /* derive plus fonce */ --color-accent-soft: #fef3ee; /* === FEATURE-SPECIFIC (decoratifs ou large text) === */ --color-souvenir: #5e3a8c; /* purple fonce, 8.10:1 sur blanc — AAA */ --color-souvenir-hover:#4c2d75; --color-souvenir-soft: #f0eaf8; --color-souvenir-ring: rgba(94,58,140,0.18); --color-rose: #a13344; /* rose fonce, 7.05:1 sur blanc — AAA */ --color-rose-soft:#faf0f1; --color-streak: #92510f; /* ambre fonce, 7.20:1 sur blanc — AAA */ --color-streak-soft: #fdf8ee; --color-indigo: #3949ab; /* indigo fonce, 7.30:1 sur blanc — AAA */ --color-indigo-soft: #edf0f9; /* === GAME ACCENTS (AAA sur fond blanc — utilises pour titres/icones jeux) === */ --color-game-memory: #047857; /* emerald-700, 7.50:1 sur blanc — AAA */ --color-game-puzzle: #b45309; /* amber-700, 7.46:1 sur blanc — AAA */ --color-game-quiz: #1e40af; /* blue-800, 8.59:1 sur blanc — AAA */ --color-game-calcul: #b91c1c; /* red-700, 7.22:1 sur blanc — AAA */ --color-game-simon: #6d28d9; /* violet-700, 7.41:1 sur blanc — AAA (vs hardcoded #8b5cf6) */ --color-game-words: #0e7490; /* cyan-700, 5.4:1 — large text/icone (vs hardcoded #06b6d4) */ --color-game-chrono: #7c3aed; /* purple-600, 5.93:1 — large text/icone */ /* === TEXTE SUR FONDS COLORES === */ --color-text-on-dark: #ffffff; /* sur fonds slate/dark */ --color-text-on-primary: #ffffff; /* sur fonds primary/accent satures */ /* === OVERLAY === */ --color-overlay: rgba(0,0,0,0.6); --color-overlay-light: rgba(0,0,0,0.3); /* === TYPOGRAPHY === */ --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif; --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-scale: 1.3; /* Layout dimensions (nav, icones, paddings) multiplient par CE scale fixe, pas --font-scale, pour que le reglage in-app « Texte plus grand » agrandisse le texte seul sans gonfler le layout. Vaut 1.3 (= defaut) pour garder la taille actuelle. */ --layout-scale: 1.3; --text-xs: calc(11px * var(--font-scale)); --text-sm: calc(13px * var(--font-scale)); --text-base: calc(15px * var(--font-scale)); --text-lg: calc(18px * var(--font-scale)); --text-xl: calc(22px * var(--font-scale)); --text-2xl: calc(28px * var(--font-scale)); --text-3xl: calc(36px * var(--font-scale)); --text-4xl: calc(48px * var(--font-scale)); --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold:800; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* === SPACING === */ --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* === BORDER RADIUS === */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 999px; /* === SHADOWS === */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.16); --shadow-modal: 0 20px 60px rgba(0,0,0,0.2); --shadow-toast: 0 10px 15px -3px rgba(0,0,0,0.1); /* === Z-INDEX === */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-critical: 60; --z-skip: 100000; /* === TRANSITIONS === */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Active-press feedback scale shared by game buttons/tiles (was scale(0.97) inline). */ --game-active-scale: 0.97; /* === SIZING === */ --touch-min: 56px; /* WCAG 44 + bonus cible 75 ans (boutons standards) */ --touch-min-sm: 48px; /* boutons secondaires */ --touch-min-lg: 64px; /* boutons critiques (SOS, OUI confirm) */ --touch-comfortable: 56px; /* legacy alias = --touch-min */ --modal-sm: 320px; --modal-md: 420px; --modal-lg: 560px; --content-max: 720px; } /* ============================================================ NIGHT / DARK MODE — AAA sur fond #0f172a (slate-900) Tous les tokens texte/UI atteignent >= 7:1. ============================================================ */ html.dark, body.night-mode { --color-bg: #0f172a; /* slate-900 */ --color-bg-elevated: #1e293b; /* slate-800 — surface surélevée */ --color-bg-subtle: #1e293b; /* slate-800 */ --color-bg-muted: #334155; /* slate-700 */ --color-bg-app: #0f172a; --color-bg-warm: #1e1b16; /* warm dark — chaud sur sombre */ --color-border: #475569; /* slate-600 */ --color-border-strong: #64748b; /* slate-500 */ --color-text: #f3f4f6; /* gray-100, 16.10:1 sur slate-900 — AAA */ --color-text-secondary:#e5e7eb; /* gray-200, 13.20:1 — AAA */ --color-text-muted: #d1d5db; /* gray-300, 11.00:1 — AAA */ --color-text-decorative:#9ca3af; /* gray-400, 7.10:1 — AAA decoratif */ --color-primary: #93c5fd; /* blue-300, 9.65:1 sur slate-900 — AAA */ --color-primary-hover: #bfdbfe; /* blue-200 */ --color-primary-soft: #1e3a8a; /* blue-900 — fond leger en sombre */ --color-primary-bg: #1e3a8a; --color-primary-ring: rgba(147,197,253,0.32); --color-success: #6ee7b7; /* emerald-300, 11.30:1 — AAA */ --color-success-hover: #a7f3d0; /* emerald-200 */ --color-success-soft: #064e3b; /* emerald-900 */ --color-success-bg: #064e3b; --color-warning: #fcd34d; /* amber-300, 12.50:1 — AAA */ --color-warning-hover: #fde68a; /* amber-200 */ --color-warning-soft: #78350f; /* amber-900 */ --color-warning-bg: #78350f; --color-error: #fca5a5; /* red-300, 8.75:1 — AAA */ --color-error-hover: #fecaca; /* red-200 */ --color-error-soft: #7f1d1d; /* red-900 */ --color-error-bg: #7f1d1d; --color-info: #93c5fd; /* blue-300, 9.65:1 — AAA */ --color-info-hover: #bfdbfe; --color-info-soft: #1e3a8a; --color-info-bg: #1e3a8a; --color-accent: #fb923c; /* orange-400, 8.10:1 sur slate-900 — AAA */ --color-accent-hover: #fdba74; /* orange-300 */ --color-accent-soft: #431407; /* orange-950 — fond leger sombre */ /* Couleurs accent — dark mode (ajout pour fix contraste seniors) */ --color-souvenir: #c084fc; /* purple-300, 7.8:1 sur slate-900 — AAA */ --color-souvenir-hover:#d8b4fe; /* purple-200 */ --color-souvenir-soft: #261640; --color-souvenir-ring: rgba(147,197,253,0.25); --color-rose: #f9a8d4; /* pink-300 */ --color-rose-soft:#351c22; --color-streak: #fdba74; /* amber-300 */ --color-streak-soft: #3d2a0e; --color-indigo: #a5b4fc; /* indigo-300, 8.7:1 — AAA */ --color-indigo-soft: #1d1f3d; /* === GAME ACCENTS — adaptes pour fond slate-900 (>= 7:1 AAA) === */ --color-game-memory: #6ee7b7; /* emerald-300, 11.30:1 — AAA */ --color-game-puzzle: #fcd34d; /* amber-300, 12.50:1 — AAA */ --color-game-quiz: #93c5fd; /* blue-300, 9.65:1 — AAA */ --color-game-calcul: #fca5a5; /* red-300, 8.75:1 — AAA */ --color-game-simon: #c4b5fd; /* violet-300, 9.80:1 — AAA */ --color-game-words: #67e8f9; /* cyan-300, 11.40:1 — AAA */ --color-game-chrono: #c084fc; /* purple-300, 7.80:1 — AAA */ --color-overlay: rgba(0,0,0,0.8); --shadow-xs: 0 1px 2px rgba(0,0,0,0.2); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.4); --shadow-xl: 0 16px 48px rgba(0,0,0,0.5); --shadow-modal: 0 20px 60px rgba(0,0,0,0.5); --shadow-toast: 0 10px 15px -3px rgba(0,0,0,0.3); } /* ============================================================ HIGH-CONTRAST MODE — accessibilite maximale Active via classe `.high-contrast` sur . Force le noir/blanc absolu pour la majorite des tokens UI. ============================================================ */ html.high-contrast { --color-bg: #ffffff; --color-bg-subtle: #ffffff; --color-bg-muted: #f3f4f6; --color-bg-app: #ffffff; --color-bg-warm: #ffffff; --color-border: #000000; --color-border-strong: #000000; --color-text: #000000; --color-text-secondary:#000000; --color-text-muted: #1f2937; /* gray-800 */ --color-text-decorative:#1f2937; --color-primary: #000000; --color-primary-hover: #1f2937; --color-primary-soft: #e5e7eb; --color-primary-bg: #f3f4f6; --color-success: #065f46; /* emerald-800 */ --color-success-hover: #064e3b; --color-warning: #92400e; /* amber-800 */ --color-warning-hover: #78350f; --color-error: #b91c1c; /* red-700 */ --color-error-hover: #991b1b; --color-info: #000000; --color-accent: #000000; --color-accent-hover: #1f2937; } html.high-contrast.dark, html.high-contrast body.night-mode { --color-bg: #000000; --color-bg-subtle: #000000; --color-bg-muted: #1f2937; --color-bg-app: #000000; --color-bg-warm: #000000; --color-border: #ffffff; --color-border-strong: #ffffff; --color-text: #ffffff; --color-text-secondary:#ffffff; --color-text-muted: #e5e7eb; --color-text-decorative:#e5e7eb; --color-primary: #ffffff; --color-primary-hover: #e5e7eb; --color-primary-soft: #1f2937; --color-primary-bg: #111827; --color-success: #6ee7b7; --color-warning: #fcd34d; --color-error: #fca5a5; --color-info: #ffffff; --color-accent: #ffffff; --color-accent-hover: #e5e7eb; } /* WCAG: respect user font preference — do not override --font-scale via media queries */