/* =============================================================
 * MANERGO — Design System Tokens
 * =============================================================
 * Source : Figma DS-Manergo (key 40ua2GkrCGleuDg8CDLNLJ)
 * Charte 2026 validée — réf. ID/Manergo-Charte-Graphique.pdf
 *
 * Convention :
 *   --m-<famille>-<step>   primitives  (palette)
 *   --m-<role>             sémantiques (usage)
 *
 * Modes : Light par défaut, override automatique en Dark via
 *   prefers-color-scheme: dark.
 * =============================================================
 */

:root {
  /* ──────────────────────────────────────────────────────────
   * PRIMITIVES — palette validée charte 2026
   * 500 = couleur de référence charte. 0..1000 = nuances.
   * ────────────────────────────────────────────────────────── */

  /* Bleu Manergo (primary) — Pantone 2388 / RAL 5002 */
  --m-blue-0:    #f4f5fc;
  --m-blue-50:   #e6e8f6;
  --m-blue-100:  #c9cdec;
  --m-blue-200:  #a3aae0;
  --m-blue-300:  #7c87d2;
  --m-blue-400:  #5663c5;
  --m-blue-500:  #3643ba;
  --m-blue-600:  #2c3699;
  --m-blue-700:  #232b7a;
  --m-blue-800:  #1b215d;
  --m-blue-900:  #131743;
  --m-blue-1000: #0a0c25;

  /* Vert Manergo */
  --m-green-0:    #eef3f3;
  --m-green-50:   #d6e1e2;
  --m-green-100:  #a9c0c2;
  --m-green-200:  #7a9ea1;
  --m-green-300:  #4f7d81;
  --m-green-400:  #2a5e62;
  --m-green-500:  #124245;
  --m-green-600:  #0e3638;
  --m-green-700:  #0b2b2d;
  --m-green-800:  #082123;
  --m-green-900:  #051718;
  --m-green-1000: #020c0d;

  /* Beige (papier) */
  --m-beige-0:    #fbf8f5;
  --m-beige-50:   #f5efe9;
  --m-beige-100:  #ede4dd;
  --m-beige-200:  #e0d4c7;
  --m-beige-300:  #cdbbac;
  --m-beige-400:  #b59c8a;
  --m-beige-500:  #9a7d6b;
  --m-beige-600:  #7e6354;
  --m-beige-700:  #5f4a3f;
  --m-beige-800:  #43332b;
  --m-beige-900:  #281e19;
  --m-beige-1000: #14100d;

  /* Marron */
  --m-brown-0:    #f7eef0;
  --m-brown-50:   #ecd6da;
  --m-brown-100:  #d4a7af;
  --m-brown-200:  #b97a83;
  --m-brown-300:  #984e57;
  --m-brown-400:  #6e2a32;
  --m-brown-500:  #380d14;
  --m-brown-600:  #2d0a10;
  --m-brown-700:  #24070d;
  --m-brown-800:  #1a050a;
  --m-brown-900:  #120406;
  --m-brown-1000: #080203;

  /* Orange (accent) */
  --m-orange-0:    #fef2ed;
  --m-orange-50:   #fcdcd0;
  --m-orange-100:  #f9b59f;
  --m-orange-200:  #f48c6e;
  --m-orange-300:  #ee6843;
  --m-orange-400:  #e84a2e;
  --m-orange-500:  #e84a2e;
  --m-orange-600:  #c33b22;
  --m-orange-700:  #9a2e1a;
  --m-orange-800:  #722113;
  --m-orange-900:  #4a150c;
  --m-orange-1000: #260a06;

  /* Jaune (signalétique) */
  --m-yellow-0:    #fef8e6;
  --m-yellow-50:   #fdedb8;
  --m-yellow-100:  #fbdd7a;
  --m-yellow-200:  #f9c945;
  --m-yellow-300:  #f5ba1c;
  --m-yellow-400:  #f2b205;
  --m-yellow-500:  #f2b205;
  --m-yellow-600:  #c89205;
  --m-yellow-700:  #9c7204;
  --m-yellow-800:  #715303;
  --m-yellow-900:  #483402;
  --m-yellow-1000: #251a01;

  /* Bleu clair (illustration / surface accent doux) */
  --m-skyblue-0:    #f3f7fd;
  --m-skyblue-50:   #e1eaf7;
  --m-skyblue-100:  #b0c2e5;
  --m-skyblue-200:  #8aa6d7;
  --m-skyblue-300:  #6488c6;
  --m-skyblue-400:  #436db4;
  --m-skyblue-500:  #2d569b;
  --m-skyblue-600:  #25457c;
  --m-skyblue-700:  #1c365f;
  --m-skyblue-800:  #142745;
  --m-skyblue-900:  #0c1a2d;
  --m-skyblue-1000: #050d17;

  /* Neutral (gris) */
  --m-neutral-0:    #ffffff;
  --m-neutral-50:   #f7f7f8;
  --m-neutral-100:  #eeeef0;
  --m-neutral-200:  #d9dade;
  --m-neutral-300:  #b9bbc2;
  --m-neutral-400:  #9395a0;
  --m-neutral-500:  #6e7180;
  --m-neutral-600:  #545765;
  --m-neutral-700:  #3d404b;
  --m-neutral-800:  #292b34;
  --m-neutral-900:  #16171c;
  --m-neutral-1000: #000000;

  /* ──────────────────────────────────────────────────────────
   * SÉMANTIQUES — alias d'usage (light mode)
   * Ne JAMAIS référencer un primitive directement dans les
   * composants ou pages. Toujours passer par une sémantique.
   * ────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --m-bg-canvas:       var(--m-neutral-0);     /* fond global page */
  --m-bg-surface:      var(--m-neutral-50);    /* cards, blocs */
  --m-bg-subtle:       var(--m-beige-50);      /* zones douces, callouts */
  --m-bg-inverse:      var(--m-blue-900);      /* hero sombre, footer */
  --m-bg-accent:       var(--m-blue-500);      /* CTA primaire, hero */
  --m-bg-accent-soft:  var(--m-blue-0);        /* bulle assistant IA, info */

  /* Text */
  --m-text-primary:    var(--m-blue-900);      /* corps de texte */
  --m-text-secondary:  var(--m-neutral-700);   /* texte secondaire */
  --m-text-muted:      var(--m-neutral-500);   /* annotations, captions */
  --m-text-inverse:    var(--m-neutral-0);     /* sur fond sombre */
  --m-text-accent:     var(--m-blue-500);      /* liens, mises en avant */
  --m-text-onAccent:   var(--m-neutral-0);     /* sur fond accent */

  /* Borders */
  --m-border-default:  var(--m-neutral-200);
  --m-border-subtle:   var(--m-neutral-100);
  --m-border-strong:   var(--m-neutral-400);
  --m-border-accent:   var(--m-blue-500);

  /* Brand */
  --m-brand-primary:   var(--m-blue-500);      /* bleu Manergo */
  --m-brand-secondary: var(--m-green-500);     /* vert Manergo */
  --m-brand-calm:      var(--m-skyblue-100);   /* bleu clair illustration */
  --m-brand-paper:     var(--m-beige-100);     /* beige fond brand */
  --m-brand-accent:    var(--m-orange-500);    /* orange CTA secondaire */
  --m-brand-warning:   var(--m-yellow-500);    /* jaune signalétique */

  /* ──────────────────────────────────────────────────────────
   * SPACING — base 4 px (multiples logiques)
   * ────────────────────────────────────────────────────────── */
  --m-space-0:   0;
  --m-space-1:   4px;
  --m-space-2:   8px;
  --m-space-3:   12px;
  --m-space-4:   16px;
  --m-space-5:   20px;
  --m-space-6:   24px;
  --m-space-8:   32px;
  --m-space-10:  40px;
  --m-space-12:  48px;
  --m-space-16:  64px;
  --m-space-20:  80px;
  --m-space-24:  96px;
  --m-space-32:  128px;

  /* ──────────────────────────────────────────────────────────
   * RADIUS
   * ────────────────────────────────────────────────────────── */
  --m-radius-none:  0;
  --m-radius-xs:    2px;
  --m-radius-sm:    4px;
  --m-radius-md:    8px;
  --m-radius-lg:    12px;
  --m-radius-xl:    16px;
  --m-radius-2xl:   24px;
  --m-radius-pill:  9999px;

  /* ──────────────────────────────────────────────────────────
   * TYPOGRAPHIE (familles + tailles + poids)
   * Cible : TT Commons Pro — fallback Inter en attendant la
   * mise en place du chargement de fontes côté thème.
   * ────────────────────────────────────────────────────────── */
  --m-font-sans: "TT Commons Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --m-fs-display-hero: clamp(48px, 6vw, 96px);
  --m-fs-display-2xl:  clamp(40px, 5vw, 72px);
  --m-fs-display-xl:   clamp(32px, 4vw, 56px);
  --m-fs-display-l:    clamp(28px, 3.2vw, 44px);
  --m-fs-display-m:    clamp(24px, 2.4vw, 36px);
  --m-fs-display-s:    clamp(20px, 2vw, 28px);

  --m-fs-h1: 40px;
  --m-fs-h2: 32px;
  --m-fs-h3: 24px;
  --m-fs-h4: 20px;
  --m-fs-h5: 18px;
  --m-fs-h6: 16px;

  --m-fs-body-l: 18px;
  --m-fs-body-m: 16px;
  --m-fs-body-s: 14px;

  --m-fs-caption: 12px;
  --m-fs-overline: 11px;

  --m-fw-light:   300;
  --m-fw-regular: 400;
  --m-fw-medium:  500;
  --m-fw-bold:    700;

  --m-lh-tight:  1.1;
  --m-lh-snug:   1.25;
  --m-lh-normal: 1.5;
  --m-lh-relaxed: 1.65;

  /* ──────────────────────────────────────────────────────────
   * OMBRES (élévation)
   * ────────────────────────────────────────────────────────── */
  --m-shadow-xs: 0 1px 2px rgba(19, 23, 67, 0.06);
  --m-shadow-sm: 0 2px 4px rgba(19, 23, 67, 0.08);
  --m-shadow-md: 0 6px 16px rgba(19, 23, 67, 0.10);
  --m-shadow-lg: 0 16px 32px rgba(19, 23, 67, 0.14);

  /* ──────────────────────────────────────────────────────────
   * MOTION
   * ────────────────────────────────────────────────────────── */
  --m-duration-fast:   120ms;
  --m-duration-normal: 200ms;
  --m-duration-slow:   320ms;
  --m-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
}

/* =============================================================
 * DARK MODE — override des sémantiques uniquement
 * Les primitives restent fixes (palette absolue).
 * ============================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --m-bg-canvas:       var(--m-blue-1000);
    --m-bg-surface:      var(--m-blue-900);
    --m-bg-subtle:       var(--m-blue-800);
    --m-bg-inverse:      var(--m-neutral-50);
    --m-bg-accent:       var(--m-blue-400);
    --m-bg-accent-soft:  var(--m-blue-800);

    --m-text-primary:    var(--m-neutral-50);
    --m-text-secondary:  var(--m-neutral-300);
    --m-text-muted:      var(--m-neutral-400);
    --m-text-inverse:    var(--m-blue-900);
    --m-text-accent:     var(--m-blue-200);
    --m-text-onAccent:   var(--m-neutral-0);

    --m-border-default:  var(--m-blue-800);
    --m-border-subtle:   var(--m-blue-900);
    --m-border-strong:   var(--m-blue-700);
    --m-border-accent:   var(--m-blue-400);
  }
}

/* =============================================================
 * Override forcé : .m-theme-light / .m-theme-dark
 * Si on veut un toggle utilisateur indépendamment du système.
 * ============================================================= */
.m-theme-dark {
  --m-bg-canvas:       var(--m-blue-1000);
  --m-bg-surface:      var(--m-blue-900);
  --m-bg-subtle:       var(--m-blue-800);
  --m-bg-inverse:      var(--m-neutral-50);
  --m-bg-accent:       var(--m-blue-400);
  --m-bg-accent-soft:  var(--m-blue-800);

  --m-text-primary:    var(--m-neutral-50);
  --m-text-secondary:  var(--m-neutral-300);
  --m-text-muted:      var(--m-neutral-400);
  --m-text-inverse:    var(--m-blue-900);
  --m-text-accent:     var(--m-blue-200);
  --m-text-onAccent:   var(--m-neutral-0);

  --m-border-default:  var(--m-blue-800);
  --m-border-subtle:   var(--m-blue-900);
  --m-border-strong:   var(--m-blue-700);
  --m-border-accent:   var(--m-blue-400);
}