/** * PREVALA — Design tokens (Phase 1) * * Convention : `--previensmoi-[categorie]-[variante]-[shade]`. * Toutes les valeurs sont des CSS variables natives, consommees directement * par Tailwind v4 via la directive @theme — pas de duplication dans * tailwind.config. * * STATUT : tokens TEMPORAIRES (Phase 1 placeholder). Seront ajustes des * livraison identite visuelle Manon (cible S+3). L'intention chromatique * (paper warm, accents oklch chaleureux, ink scale lisible RGAA) reste, * les valeurs exactes peuvent bouger. * * Reference wireframe lo-fi (Claude Design, 27/04/2026) : * docs/wireframes/PREViens MOI - Wireframes (standalone).html * * RGAA 4.1 niveau AA : contrastes verifies, focus visible >=3:1. */ @layer tokens { :root { /* ------------------------------------------------------------------- * 1. PALETTE — paper / ink / accents / semantic * ----------------------------------------------------------------- */ /* Backgrounds — papier chaleureux, evoque prevention sante de proximite, pas medicalisation froide. */ --previensmoi-color-paper-0: #fff; --previensmoi-color-paper-50: #fafaf6; --previensmoi-color-paper-100: #f4f1e8; --previensmoi-color-paper-200: #ece7d4; /* Ink — texte et lignes, contraste RGAA AA verifie sur paper-50/100. */ --previensmoi-color-ink-50: #fafafa; --previensmoi-color-ink-100: #e8e8e8; --previensmoi-color-ink-200: #cdc8b8; --previensmoi-color-ink-300: #a8a395; --previensmoi-color-ink-400: #8a8a8a; --previensmoi-color-ink-500: #6a6a6a; --previensmoi-color-ink-600: #4a4a4a; --previensmoi-color-ink-700: #2a2a2a; --previensmoi-color-ink-800: #1a1a1a; --previensmoi-color-ink-900: #0a0a0a; /* Accent primary — coral warm (action principale, CTA, focus). */ --previensmoi-color-primary-50: oklch(97% 0.02 35deg); --previensmoi-color-primary-100: oklch(93% 0.05 35deg); --previensmoi-color-primary-200: oklch(86% 0.09 35deg); --previensmoi-color-primary-300: oklch(78% 0.12 35deg); --previensmoi-color-primary-400: oklch(71% 0.14 35deg); --previensmoi-color-primary-500: oklch(65% 0.15 35deg); --previensmoi-color-primary-600: oklch(58% 0.16 35deg); --previensmoi-color-primary-700: oklch(50% 0.16 35deg); --previensmoi-color-primary-800: oklch(42% 0.14 35deg); --previensmoi-color-primary-900: oklch(34% 0.10 35deg); --previensmoi-color-primary-950: oklch(24% 0.06 35deg); /* Accent secondary — sage green (gamification, defi acheve). */ --previensmoi-color-secondary-50: oklch(97% 0.02 145deg); --previensmoi-color-secondary-100: oklch(93% 0.05 145deg); --previensmoi-color-secondary-200: oklch(86% 0.09 145deg); --previensmoi-color-secondary-300: oklch(78% 0.12 145deg); --previensmoi-color-secondary-400: oklch(71% 0.14 145deg); --previensmoi-color-secondary-500: oklch(65% 0.15 145deg); --previensmoi-color-secondary-600: oklch(58% 0.16 145deg); --previensmoi-color-secondary-700: oklch(50% 0.16 145deg); --previensmoi-color-secondary-800: oklch(42% 0.14 145deg); --previensmoi-color-secondary-900: oklch(34% 0.10 145deg); --previensmoi-color-secondary-950: oklch(24% 0.06 145deg); /* Accent neutral — dusty blue (informations, liens secondaires). */ --previensmoi-color-neutral-50: oklch(97% 0.02 250deg); --previensmoi-color-neutral-100: oklch(93% 0.05 250deg); --previensmoi-color-neutral-200: oklch(86% 0.09 250deg); --previensmoi-color-neutral-300: oklch(78% 0.12 250deg); --previensmoi-color-neutral-400: oklch(71% 0.14 250deg); --previensmoi-color-neutral-500: oklch(65% 0.15 250deg); --previensmoi-color-neutral-600: oklch(58% 0.16 250deg); --previensmoi-color-neutral-700: oklch(50% 0.16 250deg); --previensmoi-color-neutral-800: oklch(42% 0.14 250deg); --previensmoi-color-neutral-900: oklch(34% 0.10 250deg); --previensmoi-color-neutral-950: oklch(24% 0.06 250deg); /* Highlight — jaune doux pour mise en avant, badges, score. */ --previensmoi-color-highlight-50: oklch(98% 0.03 95deg); --previensmoi-color-highlight-100: oklch(95% 0.07 95deg); --previensmoi-color-highlight-200: oklch(92% 0.12 95deg); --previensmoi-color-highlight-300: oklch(88% 0.15 95deg); --previensmoi-color-highlight-400: oklch(82% 0.16 95deg); --previensmoi-color-highlight-500: oklch(75% 0.15 95deg); --previensmoi-color-highlight-600: oklch(65% 0.14 95deg); --previensmoi-color-highlight-700: oklch(55% 0.12 95deg); --previensmoi-color-highlight-800: oklch(45% 0.10 95deg); --previensmoi-color-highlight-900: oklch(35% 0.08 95deg); --previensmoi-color-highlight-950: oklch(25% 0.05 95deg); /* Semantic — etats systeme (succes, warning, erreur, info). */ --previensmoi-color-success-500: oklch(62% 0.18 145deg); --previensmoi-color-warning-500: oklch(78% 0.16 85deg); --previensmoi-color-error-500: oklch(55% 0.22 25deg); --previensmoi-color-info-500: oklch(62% 0.15 220deg); /* ------------------------------------------------------------------- * 2. TYPO — Inter (body) + Manrope (titres), FALC-ready RGAA AA * ----------------------------------------------------------------- */ --previensmoi-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --previensmoi-font-title: 'Manrope', 'Inter', system-ui, sans-serif; --previensmoi-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace; /* Font sizes — echelle modulaire 1.2 (minor third) sur base 16px. */ --previensmoi-fontsize-xs: 0.75rem; /* 12px */ --previensmoi-fontsize-sm: 0.875rem; /* 14px */ --previensmoi-fontsize-base: 1rem; /* 16px — min lisibilite */ --previensmoi-fontsize-lg: 1.125rem; /* 18px — preferred body FALC */ --previensmoi-fontsize-xl: 1.25rem; /* 20px */ --previensmoi-fontsize-2xl: 1.5rem; /* 24px */ --previensmoi-fontsize-3xl: 1.875rem; /* 30px */ --previensmoi-fontsize-4xl: 2.25rem; /* 36px */ --previensmoi-fontsize-5xl: 3rem; /* 48px */ /* Line heights — generous pour FALC. */ --previensmoi-lineheight-tight: 1.2; --previensmoi-lineheight-normal: 1.5; --previensmoi-lineheight-relaxed: 1.75; /* Font weights. */ --previensmoi-fontweight-regular: 400; --previensmoi-fontweight-medium: 500; --previensmoi-fontweight-semibold: 600; --previensmoi-fontweight-bold: 700; /* ------------------------------------------------------------------- * 3. ESPACEMENTS — echelle 4/8/12/16/24/32/48/64/96/128 (rem) * ----------------------------------------------------------------- */ --previensmoi-space-1: 0.25rem; /* 4px */ --previensmoi-space-2: 0.5rem; /* 8px */ --previensmoi-space-3: 0.75rem; /* 12px */ --previensmoi-space-4: 1rem; /* 16px */ --previensmoi-space-6: 1.5rem; /* 24px */ --previensmoi-space-8: 2rem; /* 32px */ --previensmoi-space-12: 3rem; /* 48px */ --previensmoi-space-16: 4rem; /* 64px */ --previensmoi-space-24: 6rem; /* 96px */ --previensmoi-space-32: 8rem; /* 128px */ /* ------------------------------------------------------------------- * 4. BREAKPOINTS — mobile-first, alignes Tailwind defaults * ----------------------------------------------------------------- */ --previensmoi-breakpoint-sm: 640px; --previensmoi-breakpoint-md: 768px; --previensmoi-breakpoint-lg: 1024px; --previensmoi-breakpoint-xl: 1280px; --previensmoi-breakpoint-2xl: 1536px; /* ------------------------------------------------------------------- * 5. RADIUS — propre, pas de sketchy * ----------------------------------------------------------------- */ --previensmoi-radius-sm: 0.25rem; /* 4px */ --previensmoi-radius-md: 0.5rem; /* 8px */ --previensmoi-radius-lg: 0.75rem; /* 12px */ --previensmoi-radius-xl: 1rem; /* 16px */ --previensmoi-radius-2xl: 1.5rem; /* 24px */ --previensmoi-radius-full: 9999px; /* ------------------------------------------------------------------- * 6. SHADOWS — discretes, ne pas surcharger * ----------------------------------------------------------------- */ --previensmoi-shadow-sm: 0 1px 2px 0 oklch(0% 0 0deg / 0.05); --previensmoi-shadow-md: 0 4px 6px -1px oklch(0% 0 0deg / 0.08), 0 2px 4px -2px oklch(0% 0 0deg / 0.05); --previensmoi-shadow-lg: 0 10px 15px -3px oklch(0% 0 0deg / 0.08), 0 4px 6px -4px oklch(0% 0 0deg / 0.05); --previensmoi-shadow-xl: 0 20px 25px -5px oklch(0% 0 0deg / 0.10), 0 8px 10px -6px oklch(0% 0 0deg / 0.05); /* ------------------------------------------------------------------- * 7. Z-INDEX — 5 niveaux nommes * ----------------------------------------------------------------- */ --previensmoi-z-base: 0; --previensmoi-z-dropdown: 100; --previensmoi-z-sticky: 200; --previensmoi-z-modal: 300; --previensmoi-z-toast: 400; /* ------------------------------------------------------------------- * 8. FOCUS RING — RGAA AA, contraste >=3:1 visible sur tous backgrounds * ----------------------------------------------------------------- */ --previensmoi-focus-ring-color: var(--previensmoi-color-primary-600); --previensmoi-focus-ring-width: 3px; --previensmoi-focus-ring-offset: 2px; /* ------------------------------------------------------------------- * 9. MOTION — anti-distraction, respect prefers-reduced-motion * ----------------------------------------------------------------- */ --previensmoi-motion-fast: 120ms; --previensmoi-motion-normal: 240ms; --previensmoi-motion-slow: 400ms; --previensmoi-motion-easing: cubic-bezier(0.4, 0, 0.2, 1); } /* Respect des preferences utilisateur reduce motion. */ @media (prefers-reduced-motion: reduce) { :root { --previensmoi-motion-fast: 0ms; --previensmoi-motion-normal: 0ms; --previensmoi-motion-slow: 0ms; } } } /* --------------------------------------------------------------------- * Tailwind v4 — config CSS-first via @theme. * * Tailwind genere les classes utilitaires en lisant ces directives. Les * tokens ci-dessus restent la source de verite (CSS variables natives), * Tailwind ne fait que generer les classes correspondantes (bg-primary-500, * text-ink-700, etc.). * * Reference : https://tailwindcss.com/docs/theme * ------------------------------------------------------------------- */ @theme { --color-paper-0: var(--previensmoi-color-paper-0); --color-paper-50: var(--previensmoi-color-paper-50); --color-paper-100: var(--previensmoi-color-paper-100); --color-paper-200: var(--previensmoi-color-paper-200); --color-ink-50: var(--previensmoi-color-ink-50); --color-ink-100: var(--previensmoi-color-ink-100); --color-ink-200: var(--previensmoi-color-ink-200); --color-ink-300: var(--previensmoi-color-ink-300); --color-ink-400: var(--previensmoi-color-ink-400); --color-ink-500: var(--previensmoi-color-ink-500); --color-ink-600: var(--previensmoi-color-ink-600); --color-ink-700: var(--previensmoi-color-ink-700); --color-ink-800: var(--previensmoi-color-ink-800); --color-ink-900: var(--previensmoi-color-ink-900); --color-primary-50: var(--previensmoi-color-primary-50); --color-primary-100: var(--previensmoi-color-primary-100); --color-primary-200: var(--previensmoi-color-primary-200); --color-primary-300: var(--previensmoi-color-primary-300); --color-primary-400: var(--previensmoi-color-primary-400); --color-primary-500: var(--previensmoi-color-primary-500); --color-primary-600: var(--previensmoi-color-primary-600); --color-primary-700: var(--previensmoi-color-primary-700); --color-primary-800: var(--previensmoi-color-primary-800); --color-primary-900: var(--previensmoi-color-primary-900); --color-primary-950: var(--previensmoi-color-primary-950); --color-secondary-50: var(--previensmoi-color-secondary-50); --color-secondary-500: var(--previensmoi-color-secondary-500); --color-secondary-700: var(--previensmoi-color-secondary-700); --color-neutral-50: var(--previensmoi-color-neutral-50); --color-neutral-500: var(--previensmoi-color-neutral-500); --color-neutral-700: var(--previensmoi-color-neutral-700); --color-highlight-50: var(--previensmoi-color-highlight-50); --color-highlight-500: var(--previensmoi-color-highlight-500); --color-success: var(--previensmoi-color-success-500); --color-warning: var(--previensmoi-color-warning-500); --color-error: var(--previensmoi-color-error-500); --color-info: var(--previensmoi-color-info-500); --font-sans: var(--previensmoi-font-sans); --font-title: var(--previensmoi-font-title); --font-mono: var(--previensmoi-font-mono); --spacing-1: var(--previensmoi-space-1); --spacing-2: var(--previensmoi-space-2); --spacing-3: var(--previensmoi-space-3); --spacing-4: var(--previensmoi-space-4); --spacing-6: var(--previensmoi-space-6); --spacing-8: var(--previensmoi-space-8); --spacing-12: var(--previensmoi-space-12); --radius-sm: var(--previensmoi-radius-sm); --radius-md: var(--previensmoi-radius-md); --radius-lg: var(--previensmoi-radius-lg); --radius-xl: var(--previensmoi-radius-xl); --shadow-sm: var(--previensmoi-shadow-sm); --shadow-md: var(--previensmoi-shadow-md); --shadow-lg: var(--previensmoi-shadow-lg); }