/* ═══════════════════════════════════════════════════════════════════════════
   BEELY — tokens.css   ENGENDRÉ par bin/design/palette.mjs depuis design/palette.json
   ───────────────────────────────────────────────────────────────────────────
   NE PAS ÉDITER À LA MAIN. Toute correction se fait dans design/palette.json,
   puis « node bin/design/palette.mjs ». « --check » échoue si les deux divergent.

   Feuille PARTAGÉE par tickets.css et guide.css : il n'existe plus qu'un seul jeu
   de tokens pour l'application et pour sa charte. Un second jeu, même juste le jour
   où on l'écrit, diverge au premier correctif — et c'est la charte qui ment alors,
   c'est-à-dire l'endroit précis où l'on va vérifier.

   Contrastes vérifiés par luminance relative WCAG sur chaque surface où la couleur
   se pose réellement — 0 paire sous son seuil au moment de l'écriture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Thème CLAIR — également le socle : le thème sombre ne redéfinit que ce qui change. */
:root {

  /* ── Neutres et marque ── */
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f1f1ef;
  --surface-3: #ffffff;
  --surface-head: #f7f7f5;
  --rail-bg: #f7f7f5;
  --rail-active: #e8e7e4;
  --rail-text: #37352f;
  --rail-muted: #696864;
  --rail-accent: #1969ba;
  --text-1: #37352f;
  --text-2: #5a5854;
  --text-3: #6b6a66;
  --text-disabled: #8c8b87;
  --border: #e9e9e7;
  --border-ui: #8b8a86;
  --border-strong: #78776f;
  --primary: #1b72cc;
  --primary-hover: #155fad;
  --primary-text: #1866b4;
  --primary-soft: #d3e5ef;
  --accent-ui: #2383e2;
  --accent-2: #e03e3e;
  --accent-2-text: #b31c1c;
  --accent-2-badge: #c62828;
  --on-primary: #ffffff;

  /* ── Douze teintes de données — solid ne porte jamais de texte ── */
  --h-gris: #91918e;
  --h-gris-bg: #e9e9e8;
  --h-gris-ink: #4a4842;
  --h-gris-avatar: #777672;
  --h-rouge: #e03e3e;
  --h-rouge-bg: #f9d8d8;
  --h-rouge-ink: #8b2119;
  --h-rouge-avatar: #c2544c;
  --h-orange: #d9730d;
  --h-orange-bg: #f7e3cf;
  --h-orange-ink: #8a4a06;
  --h-orange-avatar: #a8662e;
  --h-ambre: #dfab01;
  --h-ambre-bg: #f9eecc;
  --h-ambre-ink: #7a5a05;
  --h-ambre-avatar: #937033;
  --h-vert: #0f7b6c;
  --h-vert-bg: #cfe5e2;
  --h-vert-ink: #1c5545;
  --h-vert-avatar: #2d8467;
  --h-sarcelle: #12857a;
  --h-sarcelle-bg: #d0e7e4;
  --h-sarcelle-ink: #155a54;
  --h-sarcelle-avatar: #2a837b;
  --h-cyan: #0b7fa3;
  --h-cyan-bg: #cee5ed;
  --h-cyan-ink: #155066;
  --h-cyan-avatar: #2b7f9c;
  --h-bleu: #2383e2;
  --h-bleu-bg: #d3e6f9;
  --h-bleu-ink: #1a4f70;
  --h-bleu-avatar: #327da7;
  --h-indigo: #4b52b0;
  --h-indigo-bg: #dbdcef;
  --h-indigo-ink: #31356e;
  --h-indigo-avatar: #535aa8;
  --h-violet: #9065b0;
  --h-violet-bg: #e9e0ef;
  --h-violet-ink: #553171;
  --h-violet-avatar: #8f64ae;
  --h-rose: #c14c8a;
  --h-rose-bg: #f3dbe8;
  --h-rose-ink: #6d2748;
  --h-rose-avatar: #bf4b89;
  --h-brun: #9f6b53;
  --h-brun-bg: #ece1dd;
  --h-brun-ink: #5c3826;
  --h-brun-avatar: #9d6a52;

  /* ── Statuts — des alias des teintes, pas une famille de plus ── */
  --status-danger: var(--h-rouge);
  --status-danger-bg: var(--h-rouge-bg);
  --status-danger-text: var(--h-rouge-ink);
  --status-warn: var(--h-ambre);
  --status-warn-bg: var(--h-ambre-bg);
  --status-warn-text: var(--h-ambre-ink);
  --status-success: var(--h-vert);
  --status-success-bg: var(--h-vert-bg);
  --status-success-text: var(--h-vert-ink);
  --status-info: var(--h-bleu);
  --status-info-bg: var(--h-bleu-bg);
  --status-info-text: var(--h-bleu-ink);
  --status-violet: var(--h-violet);
  --status-violet-bg: var(--h-violet-bg);
  --status-violet-text: var(--h-violet-ink);

  /* ── Voiles, ombres, profondeur ── */
  --row-hover: rgba(55, 53, 47, 0.045);
  --pop-hover: rgba(55, 53, 47, 0.055);
  --rail-hover: rgba(55, 53, 47, 0.05);
  --rail-border: rgba(55, 53, 47, 0.14);
  --weekend-tint: rgba(55, 53, 47, 0.035);
  --weekend-stripe: rgba(55, 53, 47, 0.04);
  --overlay: rgba(15, 15, 15, 0.30);
  --edge-highlight: none;
  --seg-thumb: #ffffff;
  --today-tint: rgba(27, 114, 204, 0.1);
  --orb-color: rgba(27, 114, 204, 0.14);
  --ring: 0 0 0 3px rgba(35, 131, 226, 0.32);
  --shadow-repos: none;
  --shadow-souleve: rgba(15, 15, 15, 0.1) 0 2px 4px;
  --shadow-popover: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;
  --shadow-dialogue: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 5px 10px, rgba(15, 15, 15, 0.2) 0 15px 40px;
  --shadow-panneau: rgba(15, 15, 15, 0.05) -1px 0 0 0, rgba(15, 15, 15, 0.1) -3px 0 6px, rgba(15, 15, 15, 0.2) -9px 0 24px;
  --shadow-montante: rgba(15, 15, 15, 0.08) 0 -3px 8px;

  /* ── Encre d'une pastille — la teinte poussée vers le pôle du thème ── */
  --pill-contrast: #000000;
  --pill-mix: 52%;


  /* ── Typographie — échelle FERMÉE à huit crans, plancher 12 px pour tout texte lu ── */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Helvetica, sans-serif;
  --font-features: "tnum" 1, "cv11" 1;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-40: 2.5rem;
  --fw-corps: 400;
  --fw-controle: 500;
  --fw-titre-carte: 600;
  --fw-titre-objet: 700;
  --fw-accent: 800;
  --lh-tight: 1.2;
  --lh-control: 1.35;
  --lh-body: 1.5;
  --lh-read: 1.6;
  --ls-tight: -0.01em;
  --ls-tighter: -0.015em;
  --ls-caps: 0.06em;
  --mesure: 72ch;

  /* ── Espacements — les demi-pas 6 et 10 sont nommés, pas tolérés en douce ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* ── Rayons — un rôle chacun ── */
  --radius-chip: 3px;
  --radius-control: 4px;
  --radius-card: 4px;
  --radius-panel: 6px;
  --radius-dialog: 8px;
  --radius-pill: 999px;

  /* ── Mouvement — trois durées, deux courbes ── */
  --t-hover: 120ms;
  --t-pop: 180ms;
  --t-panel: 280ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-pop: cubic-bezier(.34,1.3,.64,1);

  /* ── Couches — aucun z-index numérique ailleurs ── */
  --layer-sticky: 10;
  --layer-topbar: 20;
  --layer-rail: 30;
  --layer-tabbar: 40;
  --layer-overlay: 50;
  --layer-panneau: 60;
  --layer-popover: 70;
  --layer-dialogue: 80;
  --layer-toast: 90;
  --layer-lightbox: 100;

  /* ── Paliers — trois, et les media queries n'en emploient aucun autre ── */
  --bp-lg: 1024px;
  --bp-md: 720px;
  --bp-sm: 480px;
  --bp-panneau_2col: 1280px;

  /* ── Dimensions de coque ── */
  --sidebar-w: 240px;
  --rail-w: 60px;
  --panel-w: 540px;
  --tl-col-min: 108px;
  --tl-gutter: 168px;
  --dlg-gap: 16px;
  --dlg-sm: 420px;
  --dlg-md: 560px;
  --dlg-lg: 720px;
  --dlg-xl: 980px;
  --dlg-radius: var(--radius-dialog);
  --dlg-max-h: calc(100dvh - 2 * var(--dlg-gap));

  /* Densité — « confortable » par défaut */
  --row-h: 36px;
  --control-h: 30px;
  --control-h-sm: 26px;
  color-scheme: light;
}

[data-density="compact"] {
  --row-h: 30px;
  --control-h: 28px;
  --control-h-sm: 24px;
}

/* Sous un pointeur grossier, aucune cible ne descend sous 44px (WCAG 2.5.8). */
@media (pointer: coarse) {
  :root { --cible-tactile: 44px; }
}
:root { --cible-tactile: 0px; }

/* Thème SOMBRE — explicite. */
[data-theme="dark"] {

  /* ── Neutres et marque ── */
  --surface-0: #191919;
  --surface-1: #1f1f1f;
  --surface-2: #2a2a2a;
  --surface-3: #252525;
  --surface-head: #202020;
  --rail-bg: #202020;
  --rail-active: #2f2f2f;
  --rail-text: #e3e3e1;
  --rail-muted: #9c9b98;
  --rail-accent: #79b3e8;
  --text-1: #e3e3e1;
  --text-2: #bcbbb8;
  --text-3: #9c9b98;
  --text-disabled: #74736f;
  --border: #2f2f2f;
  --border-ui: #747370;
  --border-strong: #7e7d79;
  --primary: #1b72cc;
  --primary-hover: #155fad;
  --primary-text: #79b3e8;
  --primary-soft: #1d3a55;
  --accent-ui: #5b9fd6;
  --accent-2: #e03e3e;
  --accent-2-text: #f08c8c;
  --accent-2-badge: #c62828;
  --on-primary: #ffffff;

  /* ── Douze teintes de données — solid ne porte jamais de texte ── */
  --h-gris: #91918e;
  --h-gris-bg: #3f3f3e;
  --h-gris-ink: #c5c4c1;
  --h-gris-avatar: #777672;
  --h-rouge: #e03e3e;
  --h-rouge-bg: #552828;
  --h-rouge-ink: #ff9b92;
  --h-rouge-avatar: #c2544c;
  --h-orange: #d9730d;
  --h-orange-bg: #53371a;
  --h-orange-ink: #f0a56a;
  --h-orange-avatar: #a8662e;
  --h-ambre: #dfab01;
  --h-ambre-bg: #554617;
  --h-ambre-ink: #e7c26a;
  --h-ambre-avatar: #937033;
  --h-vert: #0f7b6c;
  --h-vert-bg: #1b3935;
  --h-vert-ink: #82c7a8;
  --h-vert-avatar: #2d8467;
  --h-sarcelle: #12857a;
  --h-sarcelle-bg: #1b3c38;
  --h-sarcelle-ink: #79c6bd;
  --h-sarcelle-avatar: #2a837b;
  --h-cyan: #0b7fa3;
  --h-cyan-bg: #193a44;
  --h-cyan-ink: #79bcd8;
  --h-cyan-avatar: #2b7f9c;
  --h-bleu: #2383e2;
  --h-bleu-bg: #203b56;
  --h-bleu-ink: #8cbce8;
  --h-bleu-avatar: #327da7;
  --h-indigo: #4b52b0;
  --h-indigo-bg: #2b2d48;
  --h-indigo-ink: #a6abe6;
  --h-indigo-avatar: #535aa8;
  --h-violet: #9065b0;
  --h-violet-bg: #3f3348;
  --h-violet-ink: #c2a3d8;
  --h-violet-avatar: #8f64ae;
  --h-rose: #c14c8a;
  --h-rose-bg: #4c2c3d;
  --h-rose-ink: #e19cc0;
  --h-rose-avatar: #bf4b89;
  --h-brun: #9f6b53;
  --h-brun-bg: #43342e;
  --h-brun-ink: #d0a68e;
  --h-brun-avatar: #9d6a52;

  /* ── Statuts — des alias des teintes, pas une famille de plus ── */
  --status-danger: var(--h-rouge);
  --status-danger-bg: var(--h-rouge-bg);
  --status-danger-text: var(--h-rouge-ink);
  --status-warn: var(--h-ambre);
  --status-warn-bg: var(--h-ambre-bg);
  --status-warn-text: var(--h-ambre-ink);
  --status-success: var(--h-vert);
  --status-success-bg: var(--h-vert-bg);
  --status-success-text: var(--h-vert-ink);
  --status-info: var(--h-bleu);
  --status-info-bg: var(--h-bleu-bg);
  --status-info-text: var(--h-bleu-ink);
  --status-violet: var(--h-violet);
  --status-violet-bg: var(--h-violet-bg);
  --status-violet-text: var(--h-violet-ink);

  /* ── Voiles, ombres, profondeur ── */
  --row-hover: rgba(255, 255, 255, 0.04);
  --pop-hover: rgba(255, 255, 255, 0.06);
  --rail-hover: rgba(255, 255, 255, 0.055);
  --rail-border: rgba(255, 255, 255, 0.07);
  --weekend-tint: rgba(255, 255, 255, 0.025);
  --weekend-stripe: rgba(255, 255, 255, 0.032);
  --overlay: rgba(8, 8, 8, 0.55);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --seg-thumb: #333333;
  --today-tint: rgba(27, 114, 204, 0.09);
  --orb-color: rgba(27, 114, 204, 0.22);
  --ring: 0 0 0 3px rgba(91, 159, 214, 0.32);
  --shadow-repos: none;
  --shadow-souleve: rgba(0, 0, 0, 0.4) 0 2px 4px;
  --shadow-popover: rgba(255, 255, 255, 0.07) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 6px, rgba(0, 0, 0, 0.5) 0 9px 24px;
  --shadow-dialogue: rgba(255, 255, 255, 0.07) 0 0 0 1px, rgba(0, 0, 0, 0.35) 0 5px 10px, rgba(0, 0, 0, 0.6) 0 15px 40px;
  --shadow-panneau: rgba(255, 255, 255, 0.07) -1px 0 0 0, rgba(0, 0, 0, 0.3) -3px 0 6px, rgba(0, 0, 0, 0.5) -9px 0 24px;
  --shadow-montante: rgba(0, 0, 0, 0.45) 0 -3px 8px;

  /* ── Encre d'une pastille — la teinte poussée vers le pôle du thème ── */
  --pill-contrast: #ffffff;
  --pill-mix: 60%;
  color-scheme: dark;
}

/* Thème SYSTÈME — c'est le défaut de l'application : sans choix, on suit l'appareil.
   Le sélecteur exclut « light » pour qu'un choix explicite l'emporte dans les deux sens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

  /* ── Neutres et marque ── */
  --surface-0: #191919;
  --surface-1: #1f1f1f;
  --surface-2: #2a2a2a;
  --surface-3: #252525;
  --surface-head: #202020;
  --rail-bg: #202020;
  --rail-active: #2f2f2f;
  --rail-text: #e3e3e1;
  --rail-muted: #9c9b98;
  --rail-accent: #79b3e8;
  --text-1: #e3e3e1;
  --text-2: #bcbbb8;
  --text-3: #9c9b98;
  --text-disabled: #74736f;
  --border: #2f2f2f;
  --border-ui: #747370;
  --border-strong: #7e7d79;
  --primary: #1b72cc;
  --primary-hover: #155fad;
  --primary-text: #79b3e8;
  --primary-soft: #1d3a55;
  --accent-ui: #5b9fd6;
  --accent-2: #e03e3e;
  --accent-2-text: #f08c8c;
  --accent-2-badge: #c62828;
  --on-primary: #ffffff;

  /* ── Douze teintes de données — solid ne porte jamais de texte ── */
  --h-gris: #91918e;
  --h-gris-bg: #3f3f3e;
  --h-gris-ink: #c5c4c1;
  --h-gris-avatar: #777672;
  --h-rouge: #e03e3e;
  --h-rouge-bg: #552828;
  --h-rouge-ink: #ff9b92;
  --h-rouge-avatar: #c2544c;
  --h-orange: #d9730d;
  --h-orange-bg: #53371a;
  --h-orange-ink: #f0a56a;
  --h-orange-avatar: #a8662e;
  --h-ambre: #dfab01;
  --h-ambre-bg: #554617;
  --h-ambre-ink: #e7c26a;
  --h-ambre-avatar: #937033;
  --h-vert: #0f7b6c;
  --h-vert-bg: #1b3935;
  --h-vert-ink: #82c7a8;
  --h-vert-avatar: #2d8467;
  --h-sarcelle: #12857a;
  --h-sarcelle-bg: #1b3c38;
  --h-sarcelle-ink: #79c6bd;
  --h-sarcelle-avatar: #2a837b;
  --h-cyan: #0b7fa3;
  --h-cyan-bg: #193a44;
  --h-cyan-ink: #79bcd8;
  --h-cyan-avatar: #2b7f9c;
  --h-bleu: #2383e2;
  --h-bleu-bg: #203b56;
  --h-bleu-ink: #8cbce8;
  --h-bleu-avatar: #327da7;
  --h-indigo: #4b52b0;
  --h-indigo-bg: #2b2d48;
  --h-indigo-ink: #a6abe6;
  --h-indigo-avatar: #535aa8;
  --h-violet: #9065b0;
  --h-violet-bg: #3f3348;
  --h-violet-ink: #c2a3d8;
  --h-violet-avatar: #8f64ae;
  --h-rose: #c14c8a;
  --h-rose-bg: #4c2c3d;
  --h-rose-ink: #e19cc0;
  --h-rose-avatar: #bf4b89;
  --h-brun: #9f6b53;
  --h-brun-bg: #43342e;
  --h-brun-ink: #d0a68e;
  --h-brun-avatar: #9d6a52;

  /* ── Statuts — des alias des teintes, pas une famille de plus ── */
  --status-danger: var(--h-rouge);
  --status-danger-bg: var(--h-rouge-bg);
  --status-danger-text: var(--h-rouge-ink);
  --status-warn: var(--h-ambre);
  --status-warn-bg: var(--h-ambre-bg);
  --status-warn-text: var(--h-ambre-ink);
  --status-success: var(--h-vert);
  --status-success-bg: var(--h-vert-bg);
  --status-success-text: var(--h-vert-ink);
  --status-info: var(--h-bleu);
  --status-info-bg: var(--h-bleu-bg);
  --status-info-text: var(--h-bleu-ink);
  --status-violet: var(--h-violet);
  --status-violet-bg: var(--h-violet-bg);
  --status-violet-text: var(--h-violet-ink);

  /* ── Voiles, ombres, profondeur ── */
  --row-hover: rgba(255, 255, 255, 0.04);
  --pop-hover: rgba(255, 255, 255, 0.06);
  --rail-hover: rgba(255, 255, 255, 0.055);
  --rail-border: rgba(255, 255, 255, 0.07);
  --weekend-tint: rgba(255, 255, 255, 0.025);
  --weekend-stripe: rgba(255, 255, 255, 0.032);
  --overlay: rgba(8, 8, 8, 0.55);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --seg-thumb: #333333;
  --today-tint: rgba(27, 114, 204, 0.09);
  --orb-color: rgba(27, 114, 204, 0.22);
  --ring: 0 0 0 3px rgba(91, 159, 214, 0.32);
  --shadow-repos: none;
  --shadow-souleve: rgba(0, 0, 0, 0.4) 0 2px 4px;
  --shadow-popover: rgba(255, 255, 255, 0.07) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 6px, rgba(0, 0, 0, 0.5) 0 9px 24px;
  --shadow-dialogue: rgba(255, 255, 255, 0.07) 0 0 0 1px, rgba(0, 0, 0, 0.35) 0 5px 10px, rgba(0, 0, 0, 0.6) 0 15px 40px;
  --shadow-panneau: rgba(255, 255, 255, 0.07) -1px 0 0 0, rgba(0, 0, 0, 0.3) -3px 0 6px, rgba(0, 0, 0, 0.5) -9px 0 24px;
  --shadow-montante: rgba(0, 0, 0, 0.45) 0 -3px 8px;

  /* ── Encre d'une pastille — la teinte poussée vers le pôle du thème ── */
  --pill-contrast: #ffffff;
  --pill-mix: 60%;
    color-scheme: dark;
  }
}

/* Mouvement refusé : les trois durées tombent à zéro ICI, une seule fois, pour toute la feuille.
   Les régler composant par composant laisse toujours une transition derrière (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-hover: 0ms;
    --t-pop: 0ms;
    --t-panel: 0ms;
  }
}