/* ============================================================
   TOKENS — charte MX Solution
   Source unique des couleurs, typographies, espacements.
   Aucun autre fichier ne definit de valeur de couleur brute.
   ============================================================ */

@font-face {
  font-family: "Hemicube";
  src: url("../font/HemicubeType.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/montserrat-latin-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Charte officielle (variables du site) ---------- */
  --mx-primary:     #0511F2;
  --mx-mid:         #040FD9;
  --mx-deep:        #030BA6;
  --mx-darker:      #020659;
  --mx-darkest:     #010626;
  --mx-light:       #F9F9F9;
  --mx-blue-bright: #4D7BFF;
  --mx-green:       #4ADE80;

  /* ---------- Theme sombre (identite par defaut) ---------- */
  --bg:          var(--mx-darkest);
  --bg-halo:     rgba(5, 17, 242, 0.22);
  --grille:      rgba(77, 123, 255, 0.05);
  --surface:     #050C3A;
  --surface-2:   #0A1450;
  --surface-3:   #121D66;
  --line:        rgba(77, 123, 255, 0.20);
  --line-fort:   rgba(77, 123, 255, 0.38);
  --text:        var(--mx-light);
  --text-2:      #B4BEE6;
  --text-3:      #7F8BC0;
  --primaire:    var(--mx-primary);    /* fond des actions principales */
  --primaire-hover: var(--mx-mid);
  --primaire-texte: #FFFFFF;
  --accent:      var(--mx-blue-bright); /* liens, focus, valeurs cles sur fond sombre */
  --accent-doux: rgba(77, 123, 255, 0.16);
  --edge:        linear-gradient(90deg, transparent, var(--mx-primary), var(--mx-blue-bright), transparent);

  /* Statuts : toujours accompagnes d'un libelle et d'une icone */
  --ok:          var(--mx-green);
  --ok-doux:     rgba(74, 222, 128, 0.14);
  --alerte:      #FF9A57;
  --alerte-doux: rgba(255, 154, 87, 0.15);
  --danger:      #FF6B7D;
  --danger-doux: rgba(255, 107, 125, 0.15);
  --neutre-doux: rgba(180, 190, 230, 0.12);
  --scrim:       rgba(1, 6, 38, 0.72);

  /* ---------- Typographie ---------- */
  --font-titre: "Hemicube", "Montserrat", system-ui, sans-serif;
  --font:       "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --t-xxl:   clamp(36px, 10vw, 52px);
  --t-xl:    28px;
  --t-l:     22px;
  --t-m:     18px;
  --t-body:  16px;
  --t-s:     14px;
  --t-xs:    12px;

  /* ---------- Espacements ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* ---------- Rayons ---------- */
  --r-l:    18px;
  --r-m:    12px;
  --r-s:    8px;
  --r-pill: 999px;

  /* ---------- Cibles tactiles ---------- */
  --tap:    44px;
  --tap-lg: 52px;

  /* ---------- Layout ---------- */
  --page-pad: 16px;
  --page-max: 760px;
  --page-max-large: 1180px;
  --header-h: 60px;
  --tabbar-h: 64px;
  --sidebar-w: 248px;

  /* ---------- iOS : zones de securite ---------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* ---------- Profondeur ---------- */
  --ombre:       0 10px 40px rgba(0, 0, 0, 0.35);
  --ombre-sheet: 0 -12px 48px rgba(0, 0, 0, 0.5);
  --z-header: 20; --z-tabbar: 30; --z-toast: 60; --z-dialog: 50;

  /* ---------- Mouvement ---------- */
  --dur-fast: 120ms;
  --dur:      200ms;
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: dark;
}

/* ---------- Theme clair : lisibilite en plein soleil ---------- */
:root[data-theme="light"] {
  --bg:          #F3F5FC;
  --bg-halo:     rgba(5, 17, 242, 0.07);
  --grille:      rgba(3, 11, 166, 0.04);
  --surface:     #FFFFFF;
  --surface-2:   #EDF0FA;
  --surface-3:   #E0E5F6;
  --line:        #D3D9F0;
  --line-fort:   #AEB8E3;
  --text:        var(--mx-darkest);
  --text-2:      #34407A;
  --text-3:      #5F6A9E;
  --primaire:    var(--mx-primary);
  --primaire-hover: var(--mx-deep);
  --accent:      var(--mx-deep);
  --accent-doux: rgba(5, 17, 242, 0.08);
  --ok:          #167A3E;
  --ok-doux:     rgba(22, 122, 62, 0.10);
  --alerte:      #B24A0A;
  --alerte-doux: rgba(178, 74, 10, 0.10);
  --danger:      #C41D3A;
  --danger-doux: rgba(196, 29, 58, 0.09);
  --neutre-doux: rgba(52, 64, 122, 0.08);
  --scrim:       rgba(1, 6, 38, 0.45);
  --ombre:       0 10px 30px rgba(2, 6, 89, 0.10);
  --ombre-sheet: 0 -12px 40px rgba(2, 6, 89, 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg:          #F3F5FC;
    --bg-halo:     rgba(5, 17, 242, 0.07);
    --grille:      rgba(3, 11, 166, 0.04);
    --surface:     #FFFFFF;
    --surface-2:   #EDF0FA;
    --surface-3:   #E0E5F6;
    --line:        #D3D9F0;
    --line-fort:   #AEB8E3;
    --text:        var(--mx-darkest);
    --text-2:      #34407A;
    --text-3:      #5F6A9E;
    --primaire:    var(--mx-primary);
    --primaire-hover: var(--mx-deep);
    --accent:      var(--mx-deep);
    --accent-doux: rgba(5, 17, 242, 0.08);
    --ok:          #167A3E;
    --ok-doux:     rgba(22, 122, 62, 0.10);
    --alerte:      #B24A0A;
    --alerte-doux: rgba(178, 74, 10, 0.10);
    --danger:      #C41D3A;
    --danger-doux: rgba(196, 29, 58, 0.09);
    --neutre-doux: rgba(52, 64, 122, 0.08);
    --scrim:       rgba(1, 6, 38, 0.45);
    --ombre:       0 10px 30px rgba(2, 6, 89, 0.10);
    --ombre-sheet: 0 -12px 40px rgba(2, 6, 89, 0.18);
    color-scheme: light;
  }
}