/*
   Le sombre est le jeu de départ : c'est exactement ce qui était écrit en dur avant. Le clair se pose avec <html data-mz="clair"> (public/assistant-theme.js : le choix Auto / Clair / Sombre de
   Réglages, ou le réglage de l'appareil). Les couleurs du clair sont celles de la charte (02-charte/DESIGN.md) : papier, encre, un seul bleu électrique #004BFE.
   */

:root {
  color-scheme: dark;
  --th-cs: dark;

  /* Des canaux (« R G B »), pour écrire un voile ou un trait avec son opacité : rgb(var(--th-w) / .08) */
  --th-w: 255 255 255;          /* le blanc des voiles de verre et des traits (en clair : l'encre) */
  --th-s: 235 235 245;          /* le gris-bleu des textes secondaires d'iOS (en clair : texte doux de la charte) */
  --th-k: 0 0 0;                /* le noir des ombres et des rideaux (en clair : encre, et plus léger) */
  --th-g: 118 118 128;          /* le gris des champs de saisie et des contrôles segmentés d'iOS */
  --th-g2: 120 120 128;
  --th-panel-rgb: 28 28 30;     /* le gris des panneaux, pour le verre translucide */
  --th-ink-rgb: 245 245 247;
  --th-blue-rgb: 10 132 255;
  --th-red-rgb: 255 69 58;
  --th-green-rgb: 48 209 88;
  --th-orange-rgb: 255 159 10;
  /* Les facteurs d'opacité : le clair a besoin de plus de matière pour un texte (contraste), de moins pour une ombre */
  --th-ta: 1;                   /* texte fait d'un voile */
  --th-sa: 1;                   /* gris-bleu secondaire */
  --th-ka: 1;                   /* noir des ombres et des rideaux */
  --th-ga: 1;                   /* champs et contrôles segmentés */
  --th-fa: 1;                   /* voiles de verre et traits */

  /* Des couleurs pleines */
  --th-hi: #fff;                /* le texte le plus fort (titres, chiffres) ; en clair : l'encre */
  --th-black: #000;             /* le noir d'une vidéo, d'un fond de lecteur : noir dans les deux thèmes */
  --th-on: #fff;                /* le texte posé sur un bouton ou une pastille de couleur : blanc dans les deux thèmes */
  --th-ink: #f5f5f7;
  --th-page: #000;              /* le fond de page */
  --th-panel: #1c1c1e;          /* le gris d'un panneau */
  --th-raised: #2c2c2e;
  --th-surface: #29292b;
  --th-sunken: #232325;
  --th-gray: #8e8e93;
  --th-gray2: #636366;
  --th-gray3: #48484a;
  --th-blue: #0a84ff;
  --th-blue-fond: #0a72e6;      /* le fond d'un bouton à texte blanc */
  --th-blue-clair: #5eb0ff;     /* le bleu d'un texte posé sur du gris */
  --th-red: #ff453a;
  --th-red2: #ff6961;
  --th-green: #30d158;
  --th-orange: #ff9f0a;
  --th-orange2: #ffb340;
  --th-yellow: #ffd60a;
  --th-white-2: #dcdce1;
  --th-gray5: #6e6e73;
  --th-blue-text-e: #cfe6ff;
  --th-blue-text-f: #8cc4ff;
  --th-green-text-e: #7be495;
  --th-red-text-g: #ff9a92;

  /* Les teintes qui ne servent qu'à un endroit (textes d'état, fonds teintés, verres, creux) */
  --th-red-fond: #d93025;
  --th-orange-text: #ffd9a0;
  --th-red-text: #ff8a82;
  --th-red-text2: #ff8d86;
  --th-green-text: #4ae06f;
  --th-green-text2: #7ee89a;
  --th-green-fond: #248a3d;
  --th-blue-vif: #3b9cff;
  --th-blue-text: #8ec5ff;
  --th-deep1: #0b0b0c;
  --th-deep2: #0d0d0f;
  --th-deep3: #111113;
  --th-deep4: #161618;
  --th-deep5: #17171a;
  --th-deep6: #1d1d1f;
  --th-deep7: #2a2a2d;
  --th-raised2: #3a3a3c;
  --th-propose1: #031d38;
  --th-propose2: #02101f;
  --th-blue-text-b: #6cb4ff;
  --th-blue-text-c: #7cc0ff;
  --th-blue-text-d: #5ab0ff;
  --th-green-text-c: #5fe07f;
  --th-green-text-d: #7CFC9A;
  --th-orange-text-b: #ffd199;
  --th-red-text-c: #ffd3d0;
  --th-red-text-d: #ffb3ad;
  --th-red-text-e: #ff9a93;
  --th-red-text-f: #ff6b61;
  --th-green-tint-bg: #112a19;
  --th-red-tint-bg: #34161a;
  --th-red-fond2: #c4322a;
  --th-deep8: #26262a;
  --th-deep9: #1a1a1c;
  --th-deep10: #1e1e21;
  --th-deep11: #39393d;
  --th-propose1b: #06223f;
  --th-gray4: #5a5a5e;
  --th-orange-fond: #c87100;
  --th-purple: #bf5af2;
  --th-blue-press: #0a67d0;
  --th-deep14: #111;
  /* JARVIS elle-même (le petit dôme de la conversation) : une boule blanche dans les deux thèmes, comme le dôme 3D */
  --th-dome-haut: #fff;
  --th-dome-bas: #dcdce1;
  --th-dome-oeil: #111;
  --th-dome-ombre: 0 2px 6px rgb(0 0 0 / .35);
  --th-on-green: #04230f;
  --th-ink2: #e5e5ea;
  --th-deep12: rgb(43, 43, 45);
  --th-deep13: rgb(48, 48, 50);
  --th-amber-bg: rgb(52, 43, 30);
  --th-blue-tint: 150 190 255;
  --th-red2-rgb: 255 105 97;
  --th-yellow-rgb: 255 214 10;
  --th-gl-a: 30 30 32;
  --th-gl-a2: 30 30 33;
  --th-gl-b: 36 36 38;
  --th-gl-c: 40 40 44;
  --th-gl-d: 44 44 46;
  --th-gl-e: 58 58 60;
  --th-gl-f: 84 84 88;
  --th-green-deep-rgb: 28 92 46;
  --th-ov: 10 10 12;
}

/* Le clair : la charte. Papier #FDFDFE, encre #0B1020, texte doux #3B4457, gris #5F6980, trait #E1E6F0, fond bleuté #F3F6FD, bleu #004BFE, bleu appuyé #0036C2, erreur #B91C1C. */
html:root[data-mz="clair"] {
  color-scheme: light;
  --th-cs: light;

  --th-w: 11 16 32;
  --th-s: 59 68 87;
  --th-k: 11 16 32;
  --th-g: 95 105 128;
  --th-g2: 95 105 128;
  --th-panel-rgb: 253 253 254;
  --th-ink-rgb: 11 16 32;
  --th-blue-rgb: 0 75 254;
  --th-red-rgb: 185 28 28;
  --th-green-rgb: 21 128 61;
  --th-orange-rgb: 180 83 9;
  --th-ta: 1.35;
  --th-sa: 1.5;
  --th-ka: .4;
  --th-ga: .4;
  --th-fa: .55;

  --th-hi: #0b1020;
  --th-ink: #0b1020;
  --th-page: #f3f6fd;
  --th-panel: #fdfdfe;
  --th-raised: #eef2fb;
  --th-surface: #f3f6fd;
  --th-sunken: #e9eef9;
  --th-gray: #6b7489;
  --th-gray2: #5f6980;
  --th-gray3: #9aa3b5;
  --th-blue: #004bfe;
  --th-blue-fond: #004bfe;
  --th-blue-clair: #0036c2;
  --th-red: #b91c1c;
  --th-red2: #b91c1c;
  --th-green: #14703a;
  --th-orange: #92400e;
  --th-orange2: #92400e;
  --th-yellow: #a16207;
  --th-white-2: #c9d1e3;
  --th-gray5: #6b7489;
  --th-blue-text-e: #0036c2;
  --th-blue-text-f: #0036c2;
  --th-green-text-e: #15803d;
  --th-red-text-g: #b91c1c;
  --th-red-fond: #b91c1c;
  --th-orange-text: #92400e;
  --th-red-text: #b91c1c;
  --th-red-text2: #b91c1c;
  --th-green-text: #15803d;
  --th-green-text2: #15803d;
  --th-green-fond: #15803d;
  --th-blue-vif: #004bfe;
  --th-blue-text: #0036c2;
  --th-deep1: #f3f6fd;
  --th-deep2: #f3f6fd;
  --th-deep3: #f3f6fd;
  --th-deep4: #fdfdfe;
  --th-deep5: #eef2fb;
  --th-deep6: #eef2fb;
  --th-deep7: #e3e9f6;
  --th-raised2: #dfe5f2;
  --th-propose1: #e7eeff;
  --th-propose2: #dbe5ff;
  --th-blue-text-b: #0036c2;
  --th-blue-text-c: #0036c2;
  --th-blue-text-d: #0036c2;
  --th-green-text-c: #15803d;
  --th-green-text-d: #15803d;
  --th-orange-text-b: #92400e;
  --th-red-text-c: #b91c1c;
  --th-red-text-d: #b91c1c;
  --th-red-text-e: #b91c1c;
  --th-red-text-f: #b91c1c;
  --th-green-tint-bg: #dcfce7;
  --th-red-tint-bg: #fee2e2;
  --th-red-fond2: #b91c1c;
  --th-deep8: #f3f6fd;
  --th-deep9: #fdfdfe;
  --th-deep10: #eef2fb;
  --th-deep11: #e3e9f6;
  --th-propose1b: #e7eeff;
  --th-gray4: #5f6980;
  --th-orange-fond: #b45309;
  --th-purple: #7e22ce;
  --th-blue-press: #0036c2;
  --th-deep14: #0b1020;
  --th-dome-haut: #fff;
  --th-dome-bas: #e3e8f2;
  --th-dome-oeil: #0b1020;
  --th-dome-ombre: inset 0 0 0 .5px rgb(11 16 32 / .1), 0 2px 6px rgb(11 16 32 / .16);
  --th-on-green: #ffffff;
  --th-ink2: #3b4457;
  --th-deep12: #f3f6fd;
  --th-deep13: #eef2fb;
  --th-amber-bg: #fef3c7;
  --th-blue-tint: 0 75 254;
  --th-red2-rgb: 185 28 28;
  --th-yellow-rgb: 161 98 7;
  --th-gl-a: 253 253 254;
  --th-gl-a2: 253 253 254;
  --th-gl-b: 253 253 254;
  --th-gl-c: 253 253 254;
  --th-gl-d: 253 253 254;
  --th-gl-e: 255 255 255;
  --th-gl-f: 225 230 240;
  --th-green-deep-rgb: 21 128 61;
  --th-ov: 253 253 254;

  /* Les variables de hub.css */
  --bg: #f3f6fd; --ink: #0b1020;
  --dim: #525c73; --faint: #4a546a;
  --line: #e1e6f0; --glass: rgba(11, 16, 32, .05); --glass-2: rgba(11, 16, 32, .09);
  --blue: #004bfe; --blue-fond: #004bfe; --blue-clair: #0036c2;
}

html:root[data-da="hub"][data-mz="clair"] {
  --blue: #004bfe; --blue-strong: #004bfe; --blue-press: #0036c2; --blue-soft: #e7eeff; --blue-mid: #b9cdff; --blue-text: #0036c2;
  --bg: #fdfdfe; --surface: #f3f6fd; --sunken: #e9eef9;
  --line: #e1e6f0; --line-strong: #cbd3e6;
  --text: #0b1020; --dim: #3b4457; --faint: #4a546a;
  --ok: #15803d; --ok-soft: rgba(21, 128, 61, .12);
  --wait: #3b4457; --wait-soft: rgba(11, 16, 32, .07);
  --bad: #b91c1c; --bad-soft: rgba(185, 28, 28, .1);
  --shadow: none; --pop: 0 24px 60px rgba(11, 16, 32, .18);
}

/* Le clair : la pastille choisie d'un contrôle segmenté est blanche (comme sur iOS) ; en sombre c'est un voile plus clair que la piste. */
html:root[data-mz="clair"] :is(.bz-seg button[aria-selected="true"], .bzf-seg button[aria-selected="true"], .bzch-tab.is-on, .bzch-segbtn.is-on, .bzg-sel button.is-on, .bzn-seg button.is-on,
  .bp-worlds a.is-on, .bp-seg a.is-on, .mz3-onglet.is-on, .versions a.on, .seg button.on, .crm-tabs a.on, .seg-links a.on, .student-tabs a.on, body.mzs .seg > a.on) {
  background: #fff;
  box-shadow: 0 1px 3px rgb(var(--th-k) / .14), 0 0 0 .5px rgb(var(--th-k) / .06);
}