/* ========================================================================= TipTop — Référence unique des couleurs et mesures Chargé par les six pages. Toute couleur de l'interface passe par ici : une seule valeur à changer se répercute partout. Contexte : avant ce fichier, 99 couleurs étaient écrites en dur dans six pages, dont deux crèmes et deux encres légèrement différentes — dérive involontaire, invisible à l'œil mais impossible à maintenir. Deux thèmes : (défaut) neutre professionnel, accent vert de marque [data-theme="mono"] monochrome clair, sans accent coloré La couleur choisie par événement (`themeColor`) ne colore que le PLAN (tables, sièges) et non l'interface : c'est ce qui distingue une identité sobre d'une interface qui change entièrement de teinte à chaque événement. ========================================================================= */ :root { /* ---- Surfaces ---- */ --bg: #F6F6F4; /* fond de page */ --panel: #FFFFFF; /* cartes, panneaux */ --panel-2: #FAFAF8; /* surface alternée, discrète */ --floor: #FCFCFB; /* fond du plan de table */ --floor-grid: #EDEDEA; /* quadrillage du plan */ /* ---- Texte ---- Gris très légèrement verts, en écho au tracé du logo : un gris pur donnerait un rendu clinique qui jurerait avec un logo dessiné à l'encre. */ --ink: #1E211F; /* texte principal */ --ink-soft: #5C625F; /* texte secondaire */ /* v1.23.1 — était #989E9B, soit 2,5 à 2,7:1 : sous le seuil AA de 4,5:1 pour du petit texte, alors que le jeton sert à des textes informatifs (dates des cartes, en-têtes de facturation, version, « Libre »…). Relevé par un balayage de contraste au navigateur. La hiérarchie encre / encre douce / encre pâle s'en trouve resserrée : c'est à la refonte visuelle (phase 2) de la redistribuer, pas à la lisibilité de céder. */ --ink-faint: #6B716E; /* mentions, indications de saisie — 4,6:1 sur --bg */ /* ---- Traits ---- */ --line: #E6E7E5; --line-strong: #D3D5D2; /* ---- Accent d'interface ---- Le vert du logo, et non le doré : la demande était « moins de doré ». */ --accent: #27392E; --accent-2: #16211B; /* survol, état actif */ --accent-soft: #E8EDE9; /* fond teinté léger */ --on-accent: #FFFFFF; /* texte posé sur l'accent */ /* ---- Voile de modale ---- Utilisé par shared/ui-modal.js, qui n'a pas de feuille propre. */ --overlay: rgba(30,33,31,.42); --overlay-2: rgba(30,33,31,.30); /* second niveau d'empilement */ /* ---- Couleurs de sens ---- */ --danger: #B4453C; --danger-soft: #FBEDEA; --on-danger: #FFFFFF; /* texte posé sur le rouge */ /* v1.23.1 — --ok (#3F7A52, 4,36:1 sur --ok-soft) et --warn (#8A6D1F, 4,40:1 sur --warn-soft) passaient juste sous 4,5:1 : badges « Actif », « Payé », « Essai », bandeau d'abonnement actif. Assombris sans changer de teinte. */ --ok: #377049; /* 5,0:1 sur --ok-soft */ --ok-soft: #E4F0EA; --warn: #7A6019; /* 5,4:1 sur --warn-soft */ --warn-soft: #FBF3D4; /* ---- Éléments du plan ---- Valeurs par défaut ; `applyThemeColor()` les remplace selon la couleur choisie pour l'événement. */ --table-top: #EDEEEC; --table-top-hi: #F7F8F6; --table-edge: #D3D5D2; --chair: #FFFFFF; --chair-edge: #E0E2DF; --seat-filled: #EFF2F0; --diet: #7FB09A; /* Éléments de décor du plan (v1.23.0) : piscine, scène, bar… Neutres et plus sourds que les tables, qu'ils ne doivent pas concurrencer. Couple fond / texte : --decor → --on-decor. */ --decor: #E6EAE8; --decor-edge: #AEB5B1; --on-decor: #4A504D; /* Fond de l'étiquette de nom complet posée sous un siège (au-delà de 135 % de zoom). Translucide : le quadrillage du plan reste perceptible dessous. */ --label-bg: rgba(255,255,255,.92); /* ---- Ombres de l'export PNG ---- Le canevas ne lit pas --shadow-lift : `shadowColor` attend une COULEUR seule, pas une déclaration `offset blur couleur`. D'où deux variables distinctes, dont l'export résout la valeur calculée avant de dessiner. */ --canvas-shadow: rgba(30,33,31,.20); --canvas-shadow-soft: rgba(30,33,31,.12); /* ---- Mesures ---- */ --radius: 14px; --radius-sm: 9px; --shadow-lift: 0 12px 30px rgba(30,33,31,.13); --shadow-soft: 0 2px 8px rgba(30,33,31,.06); } /* ========================================================================= Monochrome clair — allure « papier » Même structure, accent neutralisé. C'est la seule différence de fond avec le thème par défaut : les surfaces et le texte sont déjà neutres. ========================================================================= */ [data-theme="mono"] { --bg: #F5F5F5; --panel: #FFFFFF; --panel-2: #FAFAFA; --floor: #FFFFFF; --floor-grid: #ECECEC; --ink: #141414; --ink-soft: #5A5A5A; --ink-faint: #6B6B6B; /* v1.23.1 — était #9A9A9A (2,6:1) */ --line: #E4E4E4; --line-strong: #CFCFCF; --accent: #1F1F1F; --accent-2: #000000; --accent-soft: #EDEDED; --on-accent: #FFFFFF; --overlay: rgba(0,0,0,.42); --overlay-2: rgba(0,0,0,.30); /* Les couleurs de sens restent perceptibles : en monochrome intégral, une erreur ne se distinguerait plus d'une confirmation. On les désature sans les supprimer. */ --danger: #8C3A33; --danger-soft: #F2ECEB; --on-danger: #FFFFFF; --ok: #3C5A46; --ok-soft: #ECEFED; --warn: #5C5024; --warn-soft: #F1EFE7; --table-top: #EFEFEF; --table-top-hi: #F9F9F9; --table-edge: #CFCFCF; --chair: #FFFFFF; --chair-edge: #DCDCDC; --seat-filled: #EFEFEF; --diet: #6E6E6E; --decor: #EAEAEA; --decor-edge: #ABABAB; --on-decor: #474747; --label-bg: rgba(255,255,255,.94); --canvas-shadow: rgba(0,0,0,.18); --canvas-shadow-soft: rgba(0,0,0,.10); --shadow-lift: 0 12px 30px rgba(0,0,0,.12); --shadow-soft: 0 2px 8px rgba(0,0,0,.06); }