/* Material 3 Expressive — tokens.
   Valeurs reprises des fichiers de tokens AndroidX (color v0_210, type/motion/elevation v0_103).
   Palette baseline Google, graine #6750A4. */

:root {
  /* ---- couleur, thème clair ---- */
  --primary:#6750A4;              --on-primary:#FFFFFF;
  --primary-container:#EADDFF;    --on-primary-container:#21005D;
  --secondary:#625B71;            --on-secondary:#FFFFFF;
  --secondary-container:#E8DEF8;  --on-secondary-container:#1D192B;
  --tertiary:#7D5260;             --on-tertiary:#FFFFFF;
  --tertiary-container:#FFD8E4;   --on-tertiary-container:#31111D;
  --error:#B3261E;                --on-error:#FFFFFF;
  --error-container:#F9DEDC;      --on-error-container:#410E0B;

  --surface:#FEF7FF;              --on-surface:#1D1B20;
  --on-surface-variant:#49454F;
  --surface-dim:#DED8E1;          --surface-bright:#FEF7FF;
  --sc-lowest:#FFFFFF;            --sc-low:#F7F2FA;
  --sc:#F3EDF7;                   --sc-high:#ECE6F0;   --sc-highest:#E6E0E9;

  --outline:#79747E;              --outline-variant:#CAC4D0;
  --inverse-surface:#322F35;      --inverse-on-surface:#F5EFF7;

  /* ---- formes : échelle à dix niveaux, dont les trois ajoutées par Expressive ---- */
  --shape-none:0;        --shape-xs:4px;         --shape-s:8px;
  --shape-m:12px;        --shape-l:16px;         --shape-l-inc:20px;
  --shape-xl:28px;       --shape-xl-inc:32px;    --shape-xxl:48px;
  --shape-full:9999px;

  /* ---- typographie : Roboto absent sous Windows, Segoe UI Variable est la meilleure approche.
         Display pour les grands corps, Text pour la lecture — équivalent de l'axe optique. ---- */
  --font-plain: "Segoe UI Variable Text","Segoe UI Variable Static Text","Roboto Flex",Roboto,
                "Segoe UI",system-ui,-apple-system,sans-serif;
  --font-brand: "Segoe UI Variable Display","Segoe UI Variable Static Display","Roboto Flex",Roboto,
                "Segoe UI",system-ui,-apple-system,sans-serif;

  /* ---- élévations : calculées depuis material-web _elevation.scss (ombre clé .30, ambiante .15) ---- */
  --elev-0:none;
  --elev-1:0 1px 2px 0 rgba(0,0,0,.30), 0 1px  3px 1px rgba(0,0,0,.15);
  --elev-2:0 1px 2px 0 rgba(0,0,0,.30), 0 2px  6px 2px rgba(0,0,0,.15);
  --elev-3:0 1px 3px 0 rgba(0,0,0,.30), 0 4px  8px 3px rgba(0,0,0,.15);
  --elev-4:0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);

  /* ---- mouvement : ressorts Expressive résolus analytiquement.
         Spatial rebondit (amortissement 0,8), effets jamais (amortissement 1,0). ---- */
  --spring-spatial: linear(0,.074,.233,.415,.583,.723,.829,.906,.956,.987,1.005,1.013,1.015,1.014,1.012,1.009,1.007,1.004,1.003,1.002,1);
  --spring-spatial-fast: linear(0,.130,.397,.671,.885,1.019,1.082,1.094,1.079,1.053,1.027,1.008,.997,.992,.991,.993,.995,.998,.999,1,1);
  --spring-effects: linear(0,.062,.191,.337,.475,.594,.692,.769,.829,.874,.908,.934,.952,.966,.976,.983,.988,.991,.994,.996,1);
  --dur-spatial:440ms;  --dur-spatial-fast:410ms;
  --dur-effects:200ms;  --dur-effects-fast:130ms;
  --easing-standard: cubic-bezier(.2,0,0,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary:#D0BCFF;              --on-primary:#381E72;
    --primary-container:#4F378B;    --on-primary-container:#EADDFF;
    --secondary:#CCC2DC;            --on-secondary:#332D41;
    --secondary-container:#4A4458;  --on-secondary-container:#E8DEF8;
    --tertiary:#EFB8C8;             --on-tertiary:#492532;
    --tertiary-container:#633B48;   --on-tertiary-container:#FFD8E4;
    --error:#F2B8B5;                --on-error:#601410;
    --error-container:#8C1D18;      --on-error-container:#F9DEDC;

    --surface:#141218;              --on-surface:#E6E0E9;
    --on-surface-variant:#CAC4D0;
    --surface-dim:#141218;          --surface-bright:#3B383E;
    --sc-lowest:#0F0D13;            --sc-low:#1D1B20;
    --sc:#211F26;                   --sc-high:#2B2930;  --sc-highest:#36343B;

    --outline:#938F99;              --outline-variant:#49454F;
    --inverse-surface:#E6E0E9;      --inverse-on-surface:#322F35;
  }
}

:root[data-theme="dark"] {
  --primary:#D0BCFF;              --on-primary:#381E72;
  --primary-container:#4F378B;    --on-primary-container:#EADDFF;
  --secondary:#CCC2DC;            --on-secondary:#332D41;
  --secondary-container:#4A4458;  --on-secondary-container:#E8DEF8;
  --tertiary:#EFB8C8;             --on-tertiary:#492532;
  --tertiary-container:#633B48;   --on-tertiary-container:#FFD8E4;
  --error:#F2B8B5;                --on-error:#601410;
  --error-container:#8C1D18;      --on-error-container:#F9DEDC;
  --surface:#141218;              --on-surface:#E6E0E9;
  --on-surface-variant:#CAC4D0;
  --sc-lowest:#0F0D13;            --sc-low:#1D1B20;
  --sc:#211F26;                   --sc-high:#2B2930;  --sc-highest:#36343B;
  --outline:#938F99;              --outline-variant:#49454F;
}

:root[data-theme="light"] {
  --primary:#6750A4;              --on-primary:#FFFFFF;
  --primary-container:#EADDFF;    --on-primary-container:#21005D;
  --secondary:#625B71;            --on-secondary:#FFFFFF;
  --secondary-container:#E8DEF8;  --on-secondary-container:#1D192B;
  --tertiary:#7D5260;             --on-tertiary:#FFFFFF;
  --tertiary-container:#FFD8E4;   --on-tertiary-container:#31111D;
  --error:#B3261E;                --on-error:#FFFFFF;
  --error-container:#F9DEDC;      --on-error-container:#410E0B;
  --surface:#FEF7FF;              --on-surface:#1D1B20;
  --on-surface-variant:#49454F;
  --sc-lowest:#FFFFFF;            --sc-low:#F7F2FA;
  --sc:#F3EDF7;                   --sc-high:#ECE6F0;   --sc-highest:#E6E0E9;
  --outline:#79747E;              --outline-variant:#CAC4D0;
}

/* ---- échelle typographique ---- */
.display-l  { font:400 57px/64px var(--font-brand); letter-spacing:-.0035em; }
.headline-m { font:400 28px/36px var(--font-brand); }
.title-l    { font:400 22px/28px var(--font-brand); }
.title-m    { font:500 16px/24px var(--font-plain); letter-spacing:.0125em; }
.title-s    { font:500 14px/20px var(--font-plain); letter-spacing:.0071em; }
.body-l     { font:400 16px/24px var(--font-plain); letter-spacing:.031em; }
.body-m     { font:400 14px/20px var(--font-plain); letter-spacing:.0143em; }
.body-s     { font:400 12px/16px var(--font-plain); letter-spacing:.033em; }
.label-l    { font:500 14px/20px var(--font-plain); letter-spacing:.0071em; }
.label-m    { font:500 12px/16px var(--font-plain); letter-spacing:.042em; }
.label-s    { font:500 11px/16px var(--font-plain); letter-spacing:.045em; }

/* styles emphasized : même taille, graisse et interlettrage différents */
.title-m-e  { font:700 16px/24px var(--font-plain); letter-spacing:.0094em; }
.title-s-e  { font:700 14px/20px var(--font-plain); letter-spacing:.0071em; }
.body-l-e   { font:500 16px/24px var(--font-plain); letter-spacing:.0094em; }
.label-l-e  { font:700 14px/20px var(--font-plain); letter-spacing:.0071em; }
.label-s-e  { font:700 11px/16px var(--font-plain); letter-spacing:.045em; }