/* * NeverADiet — jetons de thème (validés le 15/07/2026, voir mémoire projet). * * Deux axes INDÉPENDANTS, combinables librement, portés par deux attributs * sur (posés par js/theme.js, persistés dans localStorage) : * data-accent : frais (défaut) | sobre | chaleureux * data-mode : light (défaut) | dark | contrast * * Structure fixe : 1 gamme neutre (10 nuances, 90% de l'interface), * 1 accent (6 nuances, actions), 3 couleurs sémantiques (succès/ * avertissement/erreur — IDENTIQUES dans tous les accents, seules leurs * déclinaisons par mode changent pour rester lisibles ; jamais réutilisées * pour autre chose qu'un statut), + 3 couleurs de SOURCE de donnée * (--source-local/--source-prod/--source-collab, ajoutées le 22/07/2026 — * vert/bleu/violet, IDENTIQUES dans tous les accents comme les couleurs * sémantiques : distinguer "d'où vient cette donnée" n'est pas un statut, * mais doit rester reconnaissable de la même façon, jamais mélangé avec * succès/avertissement/erreur). * * Le mode "contrast" (WCAG AAA) ignore volontairement l'accent choisi : * noir/blanc purs + jaune, bordures marquées — jamais la couleur seule * comme signal. * * Les composants ne référencent QUE les jetons sémantiques de la dernière * section (--bg, --surface, --text, --accent...), jamais les échelles * brutes (--n*, --p*) — c'est ce qui permet aux deux axes de se combiner * sans multiplier les cas dans le CSS des composants. */ /* ───────────────────────── Axe 1 : ACCENT ───────────────────────── */ /* Frais (défaut) — teal, gris légèrement vert */ :root { --n50: #f8faf9; --n100: #f0f3f2; --n200: #e2e7e5; --n300: #c9d1cd; --n400: #98a39c; --n500: #6b766e; --n600: #4c554e; --n700: #363d38; --n800: #232722; --n900: #151815; --p50: #ecfdf7; --p100: #d1faec; --p300: #5eeac7; --p500: #0d9c82; --p600: #0a7d68; --p700: #086354; } :root[data-accent="sobre"] { --n50: #f8f9fb; --n100: #f1f3f6; --n200: #e3e7ed; --n300: #c8d0da; --n400: #96a2b3; --n500: #687689; --n600: #4a5568; --n700: #343d4c; --n800: #212630; --n900: #13161c; --p50: #eff6ff; --p100: #dbeafe; --p300: #93c5fd; --p500: #2f6fed; --p600: #1d54c4; --p700: #17429b; } :root[data-accent="chaleureux"] { --n50: #faf9f7; --n100: #f2efea; --n200: #e7e1d8; --n300: #d3c8ba; --n400: #a89985; --n500: #7d6e5b; --n600: #5c4f3f; --n700: #41372a; --n800: #2a231a; --n900: #181410; --p50: #fdf3ec; --p100: #fae2ce; --p300: #efad75; --p500: #c2622b; --p600: #9c4c1f; --p700: #793a18; } /* ───────────────────────── Axe 2 : MODE ───────────────────────── */ /* Clair (défaut) */ :root { --bg: var(--n100); --surface: #ffffff; --text: var(--n900); --text-muted: var(--n600); --border: var(--n200); --border-strong: var(--n300); --accent: var(--p500); --accent-hover: var(--p600); --accent-active: var(--p700); --accent-contrast: #ffffff; --accent-soft: var(--p50); --focus-ring: var(--p300); --success-bg: #ecfcef; --success-text: #166534; --warning-bg: #fff7e6; --warning-text: #92400e; --danger-bg: #fef0f0; --danger-text: #991b1b; --danger: #dc2626; --source-local: #15803d; --source-prod: #1d4ed8; --source-collab: #7e22ce; } /* Sombre auto (préférence système), si l'utilisateur n'a rien choisi explicitement — theme.js pose toujours data-mode quand un choix existe, ce bloc ne sert donc que de repli sans JS/avant le premier choix. */ @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]):not([data-mode="contrast"]) { --bg: var(--n900); --surface: var(--n800); --text: var(--n50); --text-muted: var(--n400); --border: var(--n700); --border-strong: var(--n600); --accent: var(--p300); --accent-hover: var(--p100); --accent-active: var(--p50); --accent-contrast: var(--n900); --accent-soft: color-mix(in srgb, var(--p700) 30%, var(--n800)); --focus-ring: var(--p300); --success-bg: #123a22; --success-text: #6ee7a0; --warning-bg: #402b06; --warning-text: #ffc670; --danger-bg: #3d1414; --danger-text: #ffb0b0; --danger: #ff6b6b; --source-local: #4ade80; --source-prod: #60a5fa; --source-collab: #c084fc; } } /* Sombre explicite */ :root[data-mode="dark"] { --bg: var(--n900); --surface: var(--n800); --text: var(--n50); --text-muted: var(--n400); --border: var(--n700); --border-strong: var(--n600); --accent: var(--p300); --accent-hover: var(--p100); --accent-active: var(--p50); --accent-contrast: var(--n900); --accent-soft: color-mix(in srgb, var(--p700) 30%, var(--n800)); --focus-ring: var(--p300); --success-bg: #123a22; --success-text: #6ee7a0; --warning-bg: #402b06; --warning-text: #ffc670; --danger-bg: #3d1414; --danger-text: #ffb0b0; --danger: #ff6b6b; --source-local: #4ade80; --source-prod: #60a5fa; --source-collab: #c084fc; } /* Contraste élevé — WCAG AAA, ignore l'accent choisi (voir en-tête) */ :root[data-mode="contrast"] { --bg: #000000; --surface: #000000; --text: #ffffff; --text-muted: #ffffff; --border: #ffffff; --border-strong: #ffffff; --accent: #ffe066; --accent-hover: #fff3bf; --accent-active: #ffffff; --accent-contrast: #000000; --accent-soft: #000000; --focus-ring: #ffe066; --success-bg: #000000; --success-text: #7cfc9a; --warning-bg: #000000; --warning-text: #ffe066; --danger-bg: #000000; --danger-text: #ff8a8a; --danger: #ff8a8a; --source-local: #7cfc9a; --source-prod: #66b3ff; --source-collab: #d9a6ff; } /* En mode contraste, toute surface/contrôle gagne une vraie bordure — jamais la couleur seule comme séparation. */ :root[data-mode="contrast"] .card, :root[data-mode="contrast"] button, :root[data-mode="contrast"] input, :root[data-mode="contrast"] select { border: 2px solid #ffffff !important; }