/* ===================================================================== PowerHub — jetons sémantiques de la surface Sizing (public / client) --------------------------------------------------------------------- Chargé à l'exécution (A3) : ce fichier est une feuille séparée, pas un fragment compilé dans la page. Un white-label futur remplace ce fichier — ou le sert depuis une ligne de base — sans retoucher un seul écran. Une seule déclaration par jeton, les deux polarités portées par light-dark() (A1 : la variation porte sur les jetons, jamais sur la structure ; aucune règle de mise en page ne connaît le thème). Bascule : - par défaut -> :root déclare `color-scheme: light dark`, donc suit l'OS - forcée écran -> - forcée test -> Playwright color_scheme= ; aucun attribut nécessaire ===================================================================== */ :root{ /* --- polarité (A6 : une polarité se DÉCLARE, elle ne se subit pas) --- */ color-scheme: light dark; /* --- surfaces --- */ --bg-page: light-dark(#F7F5F0, #14171F); --bg-surface: light-dark(#FFFFFF, #1C2029); --bg-inset: light-dark(#FCFBF9, #232833); /* champs, options au repos */ --bg-muted: light-dark(#F1F0EC, #262C37); /* pastilles neutres */ --bg-track: light-dark(#EAE7E0, #2B3039); /* rails : progression, empilement */ --border: light-dark(#E4E0D8, #333A47); --border-strong:light-dark(#B9BECC, #4A5262); /* --- élévation (A7 #1 : NON substituable par un aplat plus clair) --- En clair l'ombre porte la profondeur ; en sombre elle ne se voit plus, c'est l'écart de surface qui la porte — mais l'ombre reste, plus dense, pour détacher le bord. Un thème sombre qui supprime l'ombre aplatit la page : les cartes se soudent au fond. */ --elev-1: 0 1px 2px light-dark(rgba(27,31,42,.06), rgba(0,0,0,.50)), 0 8px 24px light-dark(rgba(27,31,42,.06), rgba(0,0,0,.34)); --elev-2: 0 10px 30px light-dark(rgba(107,130,255,.16), rgba(0,0,0,.50)); --elev-3: 0 12px 34px light-dark(rgba(0,0,0,.24), rgba(0,0,0,.62)); --elev-accent: 0 4px 14px light-dark(rgba(107,130,255,.32), rgba(0,0,0,.46)); --elev-accent-strong: 0 10px 34px light-dark(rgba(107,130,255,.20), rgba(0,0,0,.52)); /* --- texte --- */ --text: light-dark(#1B1F2A, #ECEEF3); --text-2: light-dark(#5A6275, #A8B0C0); --text-3: light-dark(#666E80, #949DAF); --text-on-accent: light-dark(#FFFFFF, #10131A); /* --- accent de marque (#6B82FF en charte, relevé en sombre pour tenir le contraste sur fond profond : même couleur perçue, pas même hex) --- */ --accent: light-dark(#6B82FF, #8C9DFF); --accent-hover: light-dark(#3F55D6, #A6B3FF); /* aplat portant du texte : l'accent de charte ne passe pas le 4.5:1 avec du blanc en polarité claire, on descend d'un cran pour les surfaces pleines — le trait, l'icône et la bordure gardent l'accent de charte. */ --accent-solid: light-dark(#4A61E8, #8C9DFF); --accent-2: light-dark(#9A6BFF, #B18BFF); /* partenaire de dégradé DÉCORATIF */ /* Le monogramme du logo porte du TEXTE sur son dégradé : ses deux arrêts doivent donc passer le contraste, pas seulement le premier. --accent-2 ne le peut pas en polarité claire (blanc sur #9A6BFF = 3.55) — d'où une paire dédiée, plutôt que d'assombrir un dégradé décoratif qui n'a rien demandé. */ --logo-1: light-dark(#4A61E8, #8C9DFF); /* blanc dessus : 5.04 / encre sombre : 7.42 */ --logo-2: light-dark(#7C4FD8, #B18BFF); /* blanc dessus : 5.29 / encre sombre : 7.08 */ --accent-soft: light-dark(#EFF2FF, #232A45); --accent-hairline:light-dark(#DFE3FF, #333C66); --accent-hover-bg:light-dark(#F6F7FF, #1F2536); --accent-ring: light-dark(rgba(107,130,255,.16), rgba(140,157,255,.24)); --accent-focus: light-dark(rgba(107,130,255,.15), rgba(140,157,255,.28)); --accent-ink: light-dark(#3B4680, #B9C3F0); /* texte sur --accent-soft */ --accent-wash: light-dark(rgba(107,130,255,.15), rgba(140,157,255,.16)); --accent-band: light-dark(rgba(107,130,255,.34), rgba(140,157,255,.40)); /* --- états : rampe PAR POLARITÉ (A7 #2). L'aplat clair d'un « bon » en thème clair devient un aplat sombre saturé en thème sombre ; la teinte de texte s'inverse avec lui. Éclaircir mécaniquement une couleur d'état ne produit pas l'autre polarité. --- */ --good: light-dark(#3FA06A, #56C089); --good-bg: light-dark(#E4F4EB, #1B3226); --good-ink: light-dark(#2C7A50, #7BD3A3); --warn: light-dark(#D9922E, #E0B45F); --warn-bg: light-dark(#FDF1DF, #33280F); --warn-line: light-dark(#F0DCB8, #4A3A18); --warn-ink: light-dark(#835711, #E8C179); --bad: light-dark(#C9484B, #E4726F); --neutral-bg:light-dark(#EFF0F4, #262B36); --neutral-ink:light-dark(#5B6376, #9AA3B5); /* --- six teintes d'usage, rampe par polarité elle aussi --- */ --u1: light-dark(#6B82FF, #8C9DFF); /* base / talon */ --u2: light-dark(#E8734A, #FF9068); /* chauffage */ --u3: light-dark(#4FB0C6, #6FCADF); /* eau chaude */ --u4: light-dark(#8E6BC9, #AF8AE6); /* véhicule */ --u5: light-dark(#3FA06A, #56C089); /* climatisation */ --u6: light-dark(#C9A44C, #E0BC63); /* piscine */ /* --- l'instrument comme matière (A7 #3) --- Le cadran n'est pas « une carte plus foncée » : c'est du laiton sur crème le jour, du laiton sur anthracite chaud la nuit. La matière change, la géométrie du cadran (voir CX/CY/R dans la page) ne bouge pas d'un pixel. --- */ --instr-face-1: light-dark(#F2EADA, #262521); --instr-face-2: light-dark(#E9DFCB, #1E1D1A); --instr-readout-1:light-dark(#E9DFCB, #1E1D1A); --instr-readout-2:light-dark(#E3D7BE, #191817); --instr-edge: light-dark(#DCCFB4, #3A382F); --instr-edge-2: light-dark(#D6C7A8, #46422F); --instr-dial-1: light-dark(#F6F0E2, #2E2C26); --instr-dial-2: light-dark(#E6DAC0, #211F1B); --instr-arc: light-dark(#CBBB98, #5A5340); --instr-tick: light-dark(#9C8A66, #8A7E5E); --instr-label: light-dark(#8A7A5C, #A2946E); --instr-cap: light-dark(#6B5D4C, #9A8F76); /* pire arret du degrade de face : 4.82 */ --instr-text: light-dark(#635946, #C9BFA3); --instr-text-2: light-dark(#615743, #B3A98E); /* pire arret du readout : 4.99 */ --instr-chip-bg: light-dark(rgba(255,255,255,.72), rgba(255,255,255,.06)); --instr-needle: light-dark(#B4443F, #E0625C); --instr-hub: light-dark(#3A3428, #0F0E0C); --instr-brass: light-dark(#C9A44C, #E0BC63); /* --- rampe des trois scénarios (escalier : muet -> intermédiaire -> accent) --- */ --sc1: light-dark(#C3C9D8, #5A6478); --sc2: light-dark(#8FA0FF, #7C8CE0); --sc2-line: light-dark(#C9D2FF, #3D4680); /* --- graphique --- */ --chart-grid: light-dark(#EAE7E0, #2B3039); --chart-label: light-dark(#666E80, #949DAF); --chart-zero: light-dark(#B9BECC, #4A5262); --chart-call: light-dark(#4A61E8, #A6B3FF); /* --- bandeaux à polarité propre (ils sont sombres dans les deux thèmes ; en sombre ils s'assoient, ils ne s'éclaircissent pas) --- */ --band-1: light-dark(#2A2F3D, #232838); --band-2: light-dark(#3A3350, #2E2945); --band-ink: light-dark(#FFFFFF, #ECEEF3); --band-ink-2:light-dark(#C3C8DA, #A9B1C6); --band-btn-bg:light-dark(#FFFFFF, #ECEEF3); --band-btn-ink:light-dark(#1B1F2A, #14171F); --mock-1: light-dark(#2A2F3D, #22262F); --mock-2: light-dark(#343A4B, #2B303B); --mock-ink: light-dark(#FFFFFF, #DDE1EA); --mock-badge-ink: light-dark(#1B1F2A, #14171F); --toast-bg: light-dark(#1B1F2A, #2A303C); --toast-ink: light-dark(#FFFFFF, #ECEEF3); --toast-hi: light-dark(#FFD98A, #FFD98A); --disabled-bg: light-dark(#C7CCDD, #39404F); --disabled-ink:light-dark(#414859, #C2C9D6); /* --- géométrie : invariante par construction (A1). Aucune de ces valeurs n'a de variante par thème, et c'est ce qui rend la comparaison géométrique du harnais (B2) opposable : une boîte qui bouge entre les deux thèmes est un défaut, pas un choix. --- */ --r: 14px; } /* Forçage explicite, pour l'écran comme pour la preuve. Poser l'attribut suffit : la polarité déclarée pilote light-dark(), aucun jeton n'est redéfini ici — donc aucune dérive possible entre les deux chemins. */ :root[data-theme="light"]{ color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }