/*
 * monExpansion Design Tokens · MX Design 4
 * Source unique du système visuel MX Design.
 *
 * Architecture : primitives -> sémantiques -> composants.
 * Les interfaces utilisent les tokens sémantiques et composants, jamais les
 * primitives directement. Les anciens alias --mx-bg*, --mx-text* et
 * --mx-shadow-* restent disponibles pendant la migration.
 *
 * MX Design 4 (2026-09-16) : la SURFACE porte l'usage et la densité, la
 * DIRECTION porte la palette. La direction par défaut est « clair ». Le crème
 * devient data-mx-direction="creme", au même rang que pearl, liquid et
 * graphite. Le sombre par défaut est le charbon neutre partagé avec Bref.
 */

/* ================================================================
   1. PRIMITIVES
   ================================================================ */
:root {
  /* Marque */
  --mx-p-coral-300: oklch(0.86 0.085 29);
  --mx-p-coral-500: #ff6b5c;
  --mx-p-coral-600: #ee5447;
  --mx-p-coral-700: #b62c18;
  --mx-p-coral-wash: color-mix(in oklch, var(--mx-p-coral-500) 11%, transparent);
  --mx-p-coral-line: color-mix(in oklch, var(--mx-p-coral-500) 32%, transparent);
  --mx-p-coral-gradient: linear-gradient(92deg, #ff6b5c 0%, #ff8a66 50%, #ffa478 100%);
  --mx-p-sunrise-gradient: radial-gradient(120% 100% at 30% 0%, #ffcfa0 0%, #ffb07f 22%, #ff9b6f 45%, #ff7a5c 70%, #ff6b5c 95%);
  --mx-p-ambient-light:
    radial-gradient(44% 46% at 12% 4%, rgba(255, 107, 92, 0.10), transparent 72%),
    radial-gradient(40% 42% at 90% 12%, rgba(255, 164, 120, 0.09), transparent 72%);
  --mx-p-ambient-dark:
    radial-gradient(48% 48% at 10% 2%, rgba(255, 107, 92, 0.16), transparent 72%),
    radial-gradient(42% 44% at 92% 10%, rgba(255, 164, 120, 0.09), transparent 72%);

  /* Clair · neutres contemporains, direction par défaut de MX Design 4 */
  --mx-p-clair-page: #ffffff;
  --mx-p-clair-panel: #f7f7f8;
  --mx-p-clair-surface: #ffffff;
  --mx-p-clair-soft: #f4f4f5;
  --mx-p-clair-line: #e5e5e5;
  --mx-p-clair-line-strong: #d9d9e0;
  --mx-p-clair-ink: #0d0d0d;
  --mx-p-clair-ink-2: #6e6e80;
  --mx-p-clair-ink-3: #8e8ea0;
  --mx-p-clair-ink-4: #acacbe;

  /* Charbon neutre · sombre partagé entre l'app Bref et le web (2026-09-14).
     Gris strictement neutres : aucune pointe de bleu ni de crème. */
  --mx-p-charbon-page: #242424;
  --mx-p-charbon-surface: #2e2e2e;
  --mx-p-charbon-calme: #2a2a2a;
  --mx-p-charbon-raised: #333333;
  --mx-p-charbon-line: #3a3a3a;
  --mx-p-charbon-ink: #f0f0f0;
  --mx-p-charbon-ink-2: #b4b4b4;
  --mx-p-charbon-ink-3: #8c8c8c;

  /* Public · palette crème du site monExpansion.com */
  --mx-p-public-page: #f5efe5;
  --mx-p-public-band: #faf5ec;
  --mx-p-public-surface: #ffffff;
  --mx-p-public-sunk: #efe8da;
  --mx-p-public-ink: #1f1812;
  --mx-p-public-ink-2: #4a3e33;
  --mx-p-public-ink-3: #8a7e6c;
  --mx-p-public-line: #e0d6c2;

  /* Produit crème · même famille chaude, densité accrue */
  --mx-p-product-page: #efe8da;
  --mx-p-product-surface: #faf5ec;
  --mx-p-product-raised: #ffffff;
  --mx-p-product-sunk: #e6ddce;
  --mx-p-product-ink: #1f1812;
  --mx-p-product-ink-2: #4a3e33;
  --mx-p-product-ink-3: #8a7e6c;
  --mx-p-product-line: #d8cbb8;

  /* Sombre crème · le dark historique, conservé pour la direction creme */
  --mx-p-dark-page: #14110f;
  --mx-p-dark-surface: #1c1816;
  --mx-p-dark-raised: #231d19;
  --mx-p-dark-sunk: #0a0807;
  --mx-p-dark-ink: #f5f1ea;
  --mx-p-dark-ink-2: #d6cfc2;
  --mx-p-dark-ink-3: #9a9082;
  --mx-p-dark-line: #2d2724;

  /* Expressions contemporaines · MX Design 3 */
  --mx-p-pearl-page: #f3f4f6;
  --mx-p-pearl-band: #e9ebef;
  --mx-p-pearl-surface: #ffffff;
  --mx-p-pearl-ink: #15171b;
  --mx-p-pearl-ink-2: #50545d;
  --mx-p-pearl-ink-3: #7d828c;
  --mx-p-pearl-line: #d9dce2;
  --mx-p-liquid-page: #eef1f5;
  --mx-p-liquid-band: #e5e9ef;
  --mx-p-graphite-page: #0e0f12;
  --mx-p-graphite-surface: #17191e;
  --mx-p-graphite-raised: #202329;
  --mx-p-graphite-ink: #f7f7f8;
  --mx-p-graphite-ink-2: #c5c8cf;
  --mx-p-graphite-ink-3: #9297a1;
  --mx-p-graphite-line: #30343b;

  /* États */
  --mx-p-success: #247a55;
  --mx-p-warning: #9b650d;
  --mx-p-danger: #b83b35;
  --mx-p-info: #355f9d;
  --mx-p-focus: #1769e0;

  /* Progrès · le seul élément qui bouge à l'œil sur un écran calme.
     Progression, marge, cap tenu, coche « réglé ». Jamais une action. */
  --mx-p-green: #10a37f;
  --mx-p-green-soft: #e6f4ef;

  /* Pastels catégoriels · ils portent QUI ou QUOI, jamais l'action.
     Recette : fond pastel + encre foncée de la même teinte. Jamais de fond
     saturé, jamais de texte blanc sur pastel. */
  --mx-p-cat-peche-ink: #9a4a1e;
  --mx-p-cat-peche-bg: #ffe6d8;
  --mx-p-cat-bleu-ink: #1f4fa3;
  --mx-p-cat-bleu-bg: #e3ecff;
  --mx-p-cat-menthe-ink: #1e6b52;
  --mx-p-cat-menthe-bg: #ddf3ea;
  --mx-p-cat-jaune-ink: #7a5a00;
  --mx-p-cat-jaune-bg: #fff1c7;
  --mx-p-cat-lavande-ink: #4b3a9e;
  --mx-p-cat-lavande-bg: #eae5fc;
  --mx-p-cat-rose-ink: #8a2e5e;
  --mx-p-cat-rose-bg: #fbe3ef;
  --mx-p-cat-gris-ink: #4a4a5a;
  --mx-p-cat-gris-bg: #ececf1;
  --mx-p-cat-sarcelle-ink: #0f6e76;
  --mx-p-cat-sarcelle-bg: #ddf3f5;

  /* Typographie · duo visible du site */
  --mx-p-font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mx-p-font-serif: "Newsreader", "Times New Roman", Georgia, serif;
  --mx-p-font: var(--mx-p-font-sans);
  --mx-p-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --mx-p-weight-regular: 400;
  --mx-p-weight-medium: 500;
  --mx-p-weight-semibold: 600;
  --mx-p-weight-bold: 700;
  /* Graisse de titre : 600. Le 700 est réservé à un hero éditorial condensé. */
  --mx-p-weight-title: 600;
  --mx-p-width-condensed: 75%;
  --mx-p-width-tight: 84%;
  --mx-p-width-normal: 100%;

  /* Interlettrage · un titre se resserre, un corps respire */
  --mx-p-track-hero: -0.032em;
  --mx-p-track-title: -0.022em;
  --mx-p-track-body: -0.005em;

  /* Échelle typographique éditoriale */
  --mx-p-text-micro: 0.6875rem;
  --mx-p-text-small: 0.8125rem;
  --mx-p-text-body: 1rem;
  --mx-p-text-lead: clamp(1.05rem, 1.5vw, 1.25rem);
  --mx-p-text-card: clamp(1.18rem, 2.2vw, 1.55rem);
  --mx-p-text-section: clamp(2.2rem, 6cqi, 4.6rem);
  --mx-p-text-display: clamp(3rem, 11cqi, 7.5rem);
  --mx-p-text-hero: clamp(3.4rem, 17cqi, 7.5rem);

  /* Échelle d'interface · le registre qui manquait entre small et body.
     12 = puce et légende · 13 = label et date · 13.5 = ligne de liste
     14 = bouton, onglet, titre de carte · 15 = corps d'app · 17 = marque */
  --mx-p-text-ui-xs: 0.75rem;
  --mx-p-text-ui-sm: 0.8125rem;
  --mx-p-text-ui-row: 0.84375rem;
  --mx-p-text-ui: 0.875rem;
  --mx-p-text-ui-lg: 0.9375rem;
  --mx-p-text-ui-xl: 1.0625rem;

  /* Rythme · échelle retenue, lisible en pixels et alignable en grille.
     Les anciens pas Fibonacci --mx-space-1..8 restent en § 4, dépréciés. */
  --mx-p-space-04: 0.25rem;
  --mx-p-space-08: 0.5rem;
  --mx-p-space-12: 0.75rem;
  --mx-p-space-16: 1rem;
  --mx-p-space-24: 1.5rem;
  --mx-p-space-32: 2rem;
  --mx-p-space-48: 3rem;
  --mx-p-space-64: 4rem;
  --mx-p-space-96: 6rem;
  --mx-p-space-128: 8rem;

  /* Formes · trois rayons et une pilule. Tout ce qui se clique est pilule. */
  --mx-p-radius-control: 0.75rem;
  --mx-p-radius-card: 1rem;
  --mx-p-radius-panel: 1.25rem;
  --mx-p-radius-pill: 999px;

  /* Mouvement */
  --mx-p-duration-fast: 160ms;
  --mx-p-duration-normal: 240ms;
  --mx-p-duration-slow: 480ms;
  --mx-p-duration-ambient: 4s;
  --mx-p-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mx-p-ease-spring: cubic-bezier(0.2, 1.25, 0.4, 1);

  /* Ombres primitives.
     En clair, l'élévation vient du filet : l'ombre reste presque invisible et
     ne porte aucun liseré blanc intérieur. En sombre, c'est la LUMIÈRE qui
     porte l'élévation · une ombre noire sur du charbon n'existe pas. */
  --mx-p-shadow-clair: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.10);
  --mx-p-shadow-clair-pop: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 44px -22px rgba(0, 0, 0, 0.16);
  --mx-p-shadow-clair-overlay: 0 2px 6px rgba(0, 0, 0, 0.06), 0 28px 64px -28px rgba(0, 0, 0, 0.24);
  --mx-p-shadow-charbon: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 30px -20px rgba(0, 0, 0, 0.9);
  --mx-p-shadow-charbon-pop: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 44px -24px rgba(0, 0, 0, 0.95);
  --mx-p-shadow-public: 0 1px 0 rgba(255, 255, 255, 0.64) inset, 0 18px 40px -28px rgba(26, 20, 16, 0.28);
  --mx-p-shadow-product: 0 1px 0 rgba(255, 255, 255, 0.62) inset, 0 16px 36px -24px rgba(55, 40, 28, 0.34);
  --mx-p-shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.055) inset, 0 18px 38px -22px rgba(0, 0, 0, 0.76);
  --mx-p-shadow-overlay: 0 30px 72px -26px rgba(26, 20, 16, 0.48);
  --mx-p-shadow-neutral: 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 22px 55px -38px rgba(25, 28, 35, 0.32);
  --mx-p-shadow-liquid: 0 1px 0 rgba(255, 255, 255, 0.92) inset, 0 28px 70px -38px rgba(44, 52, 65, 0.38);
}

/* ================================================================
   2. SÉMANTIQUES · base CLAIR, direction par défaut
   La surface porte la densité, pas la palette.
   ================================================================ */
:root,
[data-mx-surface] {
  color-scheme: light;
  --mx-page: var(--mx-p-clair-page);
  --mx-surface: var(--mx-p-clair-surface);
  --mx-surface-raised: var(--mx-p-clair-surface);
  --mx-surface-sunk: var(--mx-p-clair-panel);
  --mx-band: var(--mx-p-clair-panel);
  --mx-soft: var(--mx-p-clair-soft);
  --mx-ink: var(--mx-p-clair-ink);
  --mx-ink-muted: var(--mx-p-clair-ink-2);
  --mx-ink-faint: var(--mx-p-clair-ink-3);
  --mx-ink-dim: var(--mx-p-clair-ink-4);
  --mx-line: var(--mx-p-clair-line);
  --mx-line-strong: var(--mx-p-clair-line-strong);
  --mx-action: var(--mx-p-coral-500);
  --mx-action-hover: var(--mx-p-coral-600);
  --mx-action-ink: #ffffff;
  --mx-progress: var(--mx-p-green);
  --mx-progress-soft: var(--mx-p-green-soft);
  --mx-focus: var(--mx-p-focus);
  --mx-shadow-surface: none;
  --mx-shadow-raised: var(--mx-p-shadow-clair);
  --mx-shadow-pop: var(--mx-p-shadow-clair-pop);
  --mx-shadow-overlay: var(--mx-p-shadow-clair-overlay);
  --mx-surface-border: var(--mx-line);
  --mx-ambient: none;
  --mx-glass: rgba(255, 255, 255, 0.72);
  --mx-glass-border: rgba(13, 13, 13, 0.07);
  --mx-glass-shadow: var(--mx-p-shadow-clair);
}

/* Densité par surface · la palette ne bouge pas, le relief et le calme oui. */
[data-mx-surface="product"] {
  --mx-surface-sunk: var(--mx-p-clair-soft);
  --mx-shadow-surface: none;
}

[data-mx-surface="interactive"] {
  --mx-shadow-raised: var(--mx-p-shadow-clair-pop);
  --mx-glass: rgba(255, 255, 255, 0.64);
}

[data-mx-surface="document"] {
  --mx-shadow-surface: none;
  --mx-shadow-raised: none;
  --mx-surface-sunk: var(--mx-p-clair-panel);
  --mx-ambient: none;
}

/* ================================================================
   2B. DIRECTIONS · expressions opt-in, indépendantes de la surface
   ================================================================ */
:root,
[data-mx-surface] {
  --mx-direction: clair;
  --mx-hero-bg: var(--mx-p-charbon-page);
  --mx-hero-surface: var(--mx-p-charbon-surface);
  --mx-hero-ink: var(--mx-p-charbon-ink);
  --mx-hero-ink-muted: var(--mx-p-charbon-ink-2);
  --mx-hero-line: var(--mx-p-charbon-line);
  --mx-hero-glass: rgba(240, 240, 240, 0.06);
  --mx-hero-glass-border: rgba(240, 240, 240, 0.13);
  --mx-glass-blur: 14px;
  --mx-glass-saturation: 1.3;
}

/* --- Crème · la chaleur éditoriale, désormais opt-in ---------------- */
[data-mx-direction="creme"] {
  --mx-direction: creme;
  --mx-page: var(--mx-p-public-page);
  --mx-surface: var(--mx-p-public-surface);
  --mx-surface-raised: var(--mx-p-public-surface);
  --mx-surface-sunk: var(--mx-p-public-sunk);
  --mx-band: var(--mx-p-public-band);
  --mx-soft: var(--mx-p-public-sunk);
  --mx-ink: var(--mx-p-public-ink);
  --mx-ink-muted: var(--mx-p-public-ink-2);
  --mx-ink-faint: var(--mx-p-public-ink-3);
  --mx-ink-dim: var(--mx-p-public-ink-3);
  --mx-line: var(--mx-p-public-line);
  --mx-line-strong: var(--mx-p-public-line);
  --mx-shadow-surface: none;
  --mx-shadow-raised: var(--mx-p-shadow-public);
  --mx-shadow-pop: var(--mx-p-shadow-public);
  --mx-shadow-overlay: var(--mx-p-shadow-overlay);
  --mx-surface-border: color-mix(in oklch, var(--mx-line) 76%, transparent);
  --mx-ambient: var(--mx-p-ambient-light);
  --mx-glass: rgba(255, 255, 255, 0.52);
  --mx-glass-border: rgba(255, 255, 255, 0.68);
  --mx-glass-shadow: var(--mx-p-shadow-public);
  --mx-hero-bg: var(--mx-p-dark-page);
  --mx-hero-surface: var(--mx-p-dark-surface);
  --mx-hero-ink: var(--mx-p-dark-ink);
  --mx-hero-ink-muted: var(--mx-p-dark-ink-2);
  --mx-hero-line: var(--mx-p-dark-line);
  --mx-hero-glass: rgba(245, 241, 234, 0.055);
  --mx-hero-glass-border: rgba(245, 241, 234, 0.12);
}

[data-mx-direction="creme"][data-mx-surface="product"] {
  --mx-page: var(--mx-p-product-page);
  --mx-surface: var(--mx-p-product-surface);
  --mx-surface-raised: var(--mx-p-product-raised);
  --mx-surface-sunk: var(--mx-p-product-sunk);
  --mx-band: color-mix(in oklch, var(--mx-p-product-sunk) 74%, white);
  --mx-ink: var(--mx-p-product-ink);
  --mx-ink-muted: var(--mx-p-product-ink-2);
  --mx-ink-faint: var(--mx-p-product-ink-3);
  --mx-line: var(--mx-p-product-line);
  --mx-shadow-surface: 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 20px -18px rgba(55, 40, 28, 0.38);
  --mx-shadow-raised: var(--mx-p-shadow-product);
  --mx-surface-border: color-mix(in oklch, var(--mx-line) 72%, transparent);
  --mx-glass: rgba(255, 255, 255, 0.56);
  --mx-glass-border: rgba(255, 255, 255, 0.72);
  --mx-glass-shadow: var(--mx-p-shadow-product);
}

[data-mx-direction="creme"][data-mx-surface="interactive"] {
  --mx-surface: #faf5ec;
  --mx-surface-raised: #ffffff;
  --mx-band: color-mix(in oklch, var(--mx-p-coral-300) 22%, var(--mx-p-public-page));
  --mx-shadow-surface: 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px -18px rgba(72, 52, 43, 0.38);
  --mx-shadow-raised: 0 22px 48px -27px rgba(94, 50, 40, 0.42);
  --mx-surface-border: color-mix(in oklch, var(--mx-line) 70%, transparent);
  --mx-glass: rgba(255, 255, 255, 0.54);
  --mx-glass-border: rgba(255, 255, 255, 0.7);
}

[data-mx-direction="creme"][data-mx-surface="document"] {
  --mx-page: #faf5ec;
  --mx-surface: #ffffff;
  --mx-surface-raised: #ffffff;
  --mx-band: #f5efe5;
  --mx-action: var(--mx-p-coral-700);
  --mx-action-hover: #8d2415;
  --mx-shadow-surface: none;
  --mx-shadow-raised: 0 16px 40px -30px rgba(35, 31, 28, 0.3);
  --mx-surface-border: var(--mx-line);
  --mx-ambient: none;
  --mx-glass: rgba(255, 255, 255, 0.72);
  --mx-glass-border: rgba(255, 255, 255, 0.82);
}

/* --- Verre perle ---------------------------------------------------- */
[data-mx-direction="pearl"] {
  --mx-direction: pearl;
  --mx-page: var(--mx-p-pearl-page);
  --mx-surface: var(--mx-p-pearl-surface);
  --mx-surface-raised: var(--mx-p-pearl-surface);
  --mx-surface-sunk: var(--mx-p-pearl-band);
  --mx-band: color-mix(in oklch, var(--mx-p-pearl-band) 82%, white);
  --mx-ink: var(--mx-p-pearl-ink);
  --mx-ink-muted: var(--mx-p-pearl-ink-2);
  --mx-ink-faint: var(--mx-p-pearl-ink-3);
  --mx-line: var(--mx-p-pearl-line);
  --mx-surface-border: rgba(21, 23, 27, 0.09);
  --mx-shadow-raised: var(--mx-p-shadow-neutral);
  --mx-glass: rgba(255, 255, 255, 0.66);
  --mx-glass-border: rgba(255, 255, 255, 0.82);
  --mx-glass-shadow: var(--mx-p-shadow-neutral);
  --mx-hero-bg: var(--mx-p-pearl-page);
  --mx-hero-surface: rgba(255, 255, 255, 0.72);
  --mx-hero-ink: var(--mx-p-pearl-ink);
  --mx-hero-ink-muted: var(--mx-p-pearl-ink-2);
  --mx-hero-line: rgba(21, 23, 27, 0.10);
  --mx-hero-glass: rgba(255, 255, 255, 0.64);
  --mx-hero-glass-border: rgba(255, 255, 255, 0.86);
}

/* --- Liquid glass --------------------------------------------------- */
[data-mx-direction="liquid"] {
  --mx-direction: liquid;
  --mx-page: var(--mx-p-liquid-page);
  --mx-surface: rgba(255, 255, 255, 0.82);
  --mx-surface-raised: rgba(255, 255, 255, 0.94);
  --mx-surface-sunk: var(--mx-p-liquid-band);
  --mx-band: rgba(255, 255, 255, 0.48);
  --mx-ink: var(--mx-p-pearl-ink);
  --mx-ink-muted: var(--mx-p-pearl-ink-2);
  --mx-ink-faint: var(--mx-p-pearl-ink-3);
  --mx-line: rgba(77, 84, 96, 0.15);
  --mx-surface-border: rgba(255, 255, 255, 0.74);
  --mx-shadow-raised: var(--mx-p-shadow-liquid);
  --mx-glass: rgba(255, 255, 255, 0.50);
  --mx-glass-border: rgba(255, 255, 255, 0.78);
  --mx-glass-shadow: var(--mx-p-shadow-liquid);
  --mx-hero-bg: var(--mx-p-liquid-page);
  --mx-hero-surface: rgba(255, 255, 255, 0.50);
  --mx-hero-ink: var(--mx-p-pearl-ink);
  --mx-hero-ink-muted: var(--mx-p-pearl-ink-2);
  --mx-hero-line: rgba(77, 84, 96, 0.13);
  --mx-hero-glass: rgba(255, 255, 255, 0.46);
  --mx-hero-glass-border: rgba(255, 255, 255, 0.82);
  --mx-glass-blur: 24px;
  --mx-glass-saturation: 1.45;
}

/* --- Graphite Pro --------------------------------------------------- */
[data-mx-direction="graphite"] {
  --mx-direction: graphite;
  --mx-page: var(--mx-p-pearl-page);
  --mx-surface: var(--mx-p-pearl-surface);
  --mx-surface-raised: var(--mx-p-pearl-surface);
  --mx-surface-sunk: var(--mx-p-pearl-band);
  --mx-band: #e9ebef;
  --mx-ink: var(--mx-p-pearl-ink);
  --mx-ink-muted: var(--mx-p-pearl-ink-2);
  --mx-ink-faint: var(--mx-p-pearl-ink-3);
  --mx-line: var(--mx-p-pearl-line);
  --mx-surface-border: rgba(21, 23, 27, 0.09);
  --mx-shadow-raised: var(--mx-p-shadow-neutral);
  --mx-glass: rgba(255, 255, 255, 0.68);
  --mx-glass-border: rgba(255, 255, 255, 0.84);
  --mx-glass-shadow: var(--mx-p-shadow-neutral);
  --mx-hero-bg: var(--mx-p-graphite-page);
  --mx-hero-surface: var(--mx-p-graphite-surface);
  --mx-hero-ink: var(--mx-p-graphite-ink);
  --mx-hero-ink-muted: var(--mx-p-graphite-ink-2);
  --mx-hero-line: var(--mx-p-graphite-line);
  --mx-hero-glass: rgba(247, 247, 248, 0.065);
  --mx-hero-glass-border: rgba(247, 247, 248, 0.13);
  --mx-glass-blur: 18px;
  --mx-glass-saturation: 1.25;
}

/* --- Clair explicite · pour revenir au défaut sous un parent dirigé -- */
[data-mx-direction="clair"] {
  --mx-direction: clair;
  --mx-page: var(--mx-p-clair-page);
  --mx-surface: var(--mx-p-clair-surface);
  --mx-surface-raised: var(--mx-p-clair-surface);
  --mx-surface-sunk: var(--mx-p-clair-panel);
  --mx-band: var(--mx-p-clair-panel);
  --mx-soft: var(--mx-p-clair-soft);
  --mx-ink: var(--mx-p-clair-ink);
  --mx-ink-muted: var(--mx-p-clair-ink-2);
  --mx-ink-faint: var(--mx-p-clair-ink-3);
  --mx-ink-dim: var(--mx-p-clair-ink-4);
  --mx-line: var(--mx-p-clair-line);
  --mx-line-strong: var(--mx-p-clair-line-strong);
  --mx-surface-border: var(--mx-p-clair-line);
  --mx-shadow-surface: none;
  --mx-shadow-raised: var(--mx-p-shadow-clair);
  --mx-shadow-pop: var(--mx-p-shadow-clair-pop);
  --mx-shadow-overlay: var(--mx-p-shadow-clair-overlay);
  --mx-ambient: none;
  --mx-glass: rgba(255, 255, 255, 0.72);
  --mx-glass-border: rgba(13, 13, 13, 0.07);
  --mx-glass-shadow: var(--mx-p-shadow-clair);
  --mx-hero-bg: var(--mx-p-charbon-page);
  --mx-hero-surface: var(--mx-p-charbon-surface);
  --mx-hero-ink: var(--mx-p-charbon-ink);
  --mx-hero-ink-muted: var(--mx-p-charbon-ink-2);
  --mx-hero-line: var(--mx-p-charbon-line);
}

/* ================================================================
   2C. SOMBRE · charbon neutre par défaut
   En sombre c'est la LUMIÈRE qui porte l'élévation. Le ton du calme
   reste EN RETRAIT de la surface, sinon le bloc discret devient le
   plus lumineux de l'écran.
   ================================================================ */
:root[data-theme="dark"],
[data-mx-surface][data-theme="dark"],
.mx-dark {
  color-scheme: dark;
  --mx-page: var(--mx-p-charbon-page);
  --mx-surface: var(--mx-p-charbon-surface);
  --mx-surface-raised: var(--mx-p-charbon-raised);
  --mx-surface-sunk: var(--mx-p-charbon-calme);
  --mx-band: var(--mx-p-charbon-calme);
  --mx-soft: var(--mx-p-charbon-calme);
  --mx-ink: var(--mx-p-charbon-ink);
  --mx-ink-muted: var(--mx-p-charbon-ink-2);
  --mx-ink-faint: var(--mx-p-charbon-ink-3);
  --mx-ink-dim: var(--mx-p-charbon-ink-3);
  --mx-line: var(--mx-p-charbon-line);
  --mx-line-strong: #454545;
  --mx-action: #ff8a66;
  --mx-action-hover: #ffa478;
  --mx-action-ink: #1a1a1a;
  --mx-progress: #2fbf9a;
  --mx-progress-soft: rgba(47, 191, 154, 0.16);
  --mx-focus: #7db2ff;
  --mx-shadow-surface: none;
  --mx-shadow-raised: var(--mx-p-shadow-charbon);
  --mx-shadow-pop: var(--mx-p-shadow-charbon-pop);
  --mx-shadow-overlay: var(--mx-p-shadow-charbon-pop);
  --mx-surface-border: var(--mx-p-charbon-line);
  --mx-ambient: none;
  --mx-glass: rgba(240, 240, 240, 0.06);
  --mx-glass-border: rgba(240, 240, 240, 0.12);
  --mx-glass-shadow: var(--mx-p-shadow-charbon);
  --mx-hero-bg: #1c1c1c;
  --mx-hero-surface: var(--mx-p-charbon-surface);
  --mx-hero-ink: var(--mx-p-charbon-ink);
  --mx-hero-ink-muted: var(--mx-p-charbon-ink-2);
  --mx-hero-line: var(--mx-p-charbon-line);

  /* Pastels en sombre · la recette s'inverse. Un pastel clair posé sur du
     charbon devient le point le plus lumineux de l'écran et vole la place du
     vert. Le fond prend l'encre de la teinte, le texte prend le pastel. */
  --mx-cat-peche-bg: color-mix(in oklch, var(--mx-p-cat-peche-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-peche-ink: var(--mx-p-cat-peche-bg);
  --mx-cat-bleu-bg: color-mix(in oklch, var(--mx-p-cat-bleu-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-bleu-ink: var(--mx-p-cat-bleu-bg);
  --mx-cat-menthe-bg: color-mix(in oklch, var(--mx-p-cat-menthe-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-menthe-ink: var(--mx-p-cat-menthe-bg);
  --mx-cat-jaune-bg: color-mix(in oklch, var(--mx-p-cat-jaune-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-jaune-ink: var(--mx-p-cat-jaune-bg);
  --mx-cat-lavande-bg: color-mix(in oklch, var(--mx-p-cat-lavande-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-lavande-ink: var(--mx-p-cat-lavande-bg);
  --mx-cat-rose-bg: color-mix(in oklch, var(--mx-p-cat-rose-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-rose-ink: var(--mx-p-cat-rose-bg);
  --mx-cat-gris-bg: color-mix(in oklch, var(--mx-p-cat-gris-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-gris-ink: var(--mx-p-cat-gris-bg);
  --mx-cat-sarcelle-bg: color-mix(in oklch, var(--mx-p-cat-sarcelle-ink) 42%, var(--mx-p-charbon-surface));
  --mx-cat-sarcelle-ink: var(--mx-p-cat-sarcelle-bg);
}

/* Sombre crème · le dark historique, conservé sous la direction creme */
[data-mx-direction="creme"][data-theme="dark"],
[data-mx-direction="creme"].mx-dark {
  --mx-page: var(--mx-p-dark-page);
  --mx-surface: var(--mx-p-dark-surface);
  --mx-surface-raised: var(--mx-p-dark-raised);
  --mx-surface-sunk: var(--mx-p-dark-sunk);
  --mx-band: var(--mx-p-dark-sunk);
  --mx-ink: var(--mx-p-dark-ink);
  --mx-ink-muted: var(--mx-p-dark-ink-2);
  --mx-ink-faint: var(--mx-p-dark-ink-3);
  --mx-line: var(--mx-p-dark-line);
  --mx-shadow-surface: 0 1px 0 rgba(255, 255, 255, 0.055), 0 9px 20px -18px rgba(0, 0, 0, 0.8);
  --mx-shadow-raised: var(--mx-p-shadow-dark);
  --mx-shadow-overlay: 0 30px 72px -24px rgba(0, 0, 0, 0.82);
  --mx-surface-border: color-mix(in oklch, var(--mx-line) 82%, transparent);
  --mx-ambient: var(--mx-p-ambient-dark);
  --mx-glass: rgba(245, 241, 234, 0.055);
  --mx-glass-border: rgba(245, 241, 234, 0.12);
  --mx-glass-shadow: var(--mx-p-shadow-dark);
}

/* ================================================================
   3. COMPOSANTS
   ================================================================ */
:root {
  --mx-font: var(--mx-p-font);
  --mx-font-sans: var(--mx-p-font-sans);
  --mx-font-serif: var(--mx-p-font-serif);
  --mx-font-mono: var(--mx-p-font-mono);
  --mx-text-micro: var(--mx-p-text-micro);
  --mx-text-small: var(--mx-p-text-small);
  --mx-text-body: var(--mx-p-text-body);
  --mx-text-lead: var(--mx-p-text-lead);
  --mx-text-card: var(--mx-p-text-card);
  --mx-text-section: var(--mx-p-text-section);
  --mx-text-display: var(--mx-p-text-display);
  --mx-text-hero: var(--mx-p-text-hero);

  --mx-text-ui-xs: var(--mx-p-text-ui-xs);
  --mx-text-ui-sm: var(--mx-p-text-ui-sm);
  --mx-text-ui-row: var(--mx-p-text-ui-row);
  --mx-text-ui: var(--mx-p-text-ui);
  --mx-text-ui-lg: var(--mx-p-text-ui-lg);
  --mx-text-ui-xl: var(--mx-p-text-ui-xl);

  --mx-weight-title: var(--mx-p-weight-title);
  --mx-track-hero: var(--mx-p-track-hero);
  --mx-track-title: var(--mx-p-track-title);
  --mx-track-body: var(--mx-p-track-body);

  --mx-space-04: var(--mx-p-space-04);
  --mx-space-08: var(--mx-p-space-08);
  --mx-space-12: var(--mx-p-space-12);
  --mx-space-16: var(--mx-p-space-16);
  --mx-space-24: var(--mx-p-space-24);
  --mx-space-32: var(--mx-p-space-32);
  --mx-space-48: var(--mx-p-space-48);
  --mx-space-64: var(--mx-p-space-64);
  --mx-space-96: var(--mx-p-space-96);
  --mx-space-128: var(--mx-p-space-128);

  --mx-radius-control: var(--mx-p-radius-control);
  --mx-radius-card: var(--mx-p-radius-card);
  --mx-radius-panel: var(--mx-p-radius-panel);
  --mx-radius-pill: var(--mx-p-radius-pill);

  --mx-duration-fast: var(--mx-p-duration-fast);
  --mx-duration-normal: var(--mx-p-duration-normal);
  --mx-duration-slow: var(--mx-p-duration-slow);
  --mx-duration-ambient: var(--mx-p-duration-ambient);
  --mx-ease-out: var(--mx-p-ease-out);
  --mx-ease-spring: var(--mx-p-ease-spring);

  /* Tout ce qui se clique est une pilule. La graisse 500 guide, 700 crie. */
  --mx-button-height: 2.75rem;
  --mx-button-padding: 0 1.125rem;
  --mx-button-radius: var(--mx-radius-pill);
  --mx-button-font-size: var(--mx-text-ui);
  --mx-button-font-weight: var(--mx-p-weight-medium);

  --mx-input-height: 2.75rem;
  --mx-input-padding: 0 0.875rem;
  --mx-input-radius: var(--mx-radius-control);

  --mx-card-padding: clamp(1.1rem, 3cqi, 1.5rem);
  --mx-card-radius: var(--mx-radius-card);
  --mx-panel-padding: clamp(1.4rem, 4cqi, 3rem);
  --mx-panel-radius: var(--mx-radius-panel);

  --mx-focus-ring: 0 0 0 2px var(--mx-page), 0 0 0 4px var(--mx-focus);

  /* Catégories · fond pastel + encre de la même teinte */
  --mx-cat-peche-ink: var(--mx-p-cat-peche-ink);
  --mx-cat-peche-bg: var(--mx-p-cat-peche-bg);
  --mx-cat-bleu-ink: var(--mx-p-cat-bleu-ink);
  --mx-cat-bleu-bg: var(--mx-p-cat-bleu-bg);
  --mx-cat-menthe-ink: var(--mx-p-cat-menthe-ink);
  --mx-cat-menthe-bg: var(--mx-p-cat-menthe-bg);
  --mx-cat-jaune-ink: var(--mx-p-cat-jaune-ink);
  --mx-cat-jaune-bg: var(--mx-p-cat-jaune-bg);
  --mx-cat-lavande-ink: var(--mx-p-cat-lavande-ink);
  --mx-cat-lavande-bg: var(--mx-p-cat-lavande-bg);
  --mx-cat-rose-ink: var(--mx-p-cat-rose-ink);
  --mx-cat-rose-bg: var(--mx-p-cat-rose-bg);
  --mx-cat-gris-ink: var(--mx-p-cat-gris-ink);
  --mx-cat-gris-bg: var(--mx-p-cat-gris-bg);
  --mx-cat-sarcelle-ink: var(--mx-p-cat-sarcelle-ink);
  --mx-cat-sarcelle-bg: var(--mx-p-cat-sarcelle-bg);
}

/* ================================================================
   4. COMPATIBILITÉ PENDANT LA MIGRATION
   ================================================================ */
:root,
[data-mx-surface] {
  --mx-accent: var(--mx-action);
  --mx-accent-hover: var(--mx-action-hover);
  --mx-accent-dim: var(--mx-p-coral-wash);
  --mx-accent-glow: var(--mx-p-coral-line);
  --mx-gradient-accent: var(--mx-p-coral-gradient);

  --mx-bg: var(--mx-page);
  --mx-bg-deep: var(--mx-page);
  --mx-bg-plane: var(--mx-surface);
  --mx-bg-card: var(--mx-surface);
  --mx-bg-elevated: var(--mx-surface-raised);
  --mx-bg-high: var(--mx-surface-raised);
  --mx-bg-subtle: var(--mx-band);
  --mx-bg-input: var(--mx-surface-sunk);
  --mx-bg-sunk: var(--mx-surface-sunk);

  --mx-text: var(--mx-ink);
  --mx-text-secondary: var(--mx-ink-muted);
  --mx-text-muted: var(--mx-ink-faint);
  --mx-border: var(--mx-line);

  --mx-font-display: var(--mx-font-sans);
  --mx-font-heading: var(--mx-font-sans);
  --mx-font-heading-structural: var(--mx-font-sans);
  --mx-font-editorial: var(--mx-font-serif);
  --mx-font-body: var(--mx-font-sans);
  --mx-font-label: var(--mx-font-sans);

  --mx-radius-sm: var(--mx-radius-control);
  --mx-radius-md: var(--mx-radius-control);
  --mx-radius-lg: var(--mx-radius-card);
  --mx-radius-xl: var(--mx-radius-panel);

  --mx-shadow-1: var(--mx-shadow-surface);
  --mx-shadow-2: var(--mx-shadow-raised);
  --mx-shadow-3: var(--mx-shadow-overlay);
  --mx-shadow-sunk: inset 0 2px 5px color-mix(in srgb, var(--mx-ink) 12%, transparent);
  --mx-shadow-card: var(--mx-shadow-surface);
  --mx-shadow-elevated: var(--mx-shadow-raised);

  --mx-success: var(--mx-p-success);
  --mx-warning: var(--mx-p-warning);
  --mx-error: var(--mx-p-danger);
  --mx-info: var(--mx-p-info);
}

/* Ancienne échelle Fibonacci · DÉPRÉCIÉE, conservée pour ne rien casser.
   Un nouveau livrable utilise --mx-space-04 … --mx-space-128. */
:root {
  --mx-space-1: 0.25rem;
  --mx-space-2: 0.5rem;
  --mx-space-3: 0.8125rem;
  --mx-space-4: 1.3125rem;
  --mx-space-5: 2.125rem;
  --mx-space-6: 3.4375rem;
  --mx-space-7: 5.5625rem;
  --mx-space-8: 8.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mx-duration-fast: 0ms;
    --mx-duration-normal: 0ms;
    --mx-duration-slow: 0ms;
    --mx-duration-ambient: 0ms;
  }
}