/* Maxi Services — Tokens (concaténation des 5 fichiers design-system/tokens/).
   ⚠️ SANS l'@import Google Fonts de typography.css : les polices sont chargées
   par app/css/polices.css (@font-face woff2 auto-hébergés). Ne pas éditer à la
   main — re-synchroniser depuis le design system (/design-sync) puis reconcaténer. */

/* ============================ colors.css ============================ */
:root {
  /* — Marque — */
  --ms-flame:        #EA5438;
  --ms-coral:        #F28438;
  --ms-amber:        #FAB537;
  --ms-black:        #000000;

  /* — Dégradé signature (sens du logo : gauche → droite) — */
  --ms-gradient:      linear-gradient(90deg, #EA5438 0%, #FAB537 100%);
  --ms-gradient-soft: linear-gradient(90deg, rgba(234,84,56,.08) 0%, rgba(250,181,55,.08) 100%);

  /* — France (signature tricolore, ≤ 1 % des surfaces) — */
  --ms-france-bleu:  #20419A;
  --ms-france-rouge: #D2232E;
  --liseret-height:  4px;

  /* — Neutres — */
  --ms-ink:          #141414;
  --ms-graphite:     #2E2A28;
  --ms-steel:        #5C5652;
  --ms-slate:        #8A837E;
  --ms-mist:         #C7C1BC;
  --ms-fog:          #E9E5E2;
  --ms-cloud:        #F4F1EF;
  --ms-paper:        #FAF8F7;
  --ms-white:        #FFFFFF;

  /* — Sémantiques — */
  --ms-success:      #2E7D4F;
  --ms-success-bg:   #E9F4EE;
  --ms-warning:      #B8860B;
  --ms-warning-bg:   #FBF3DC;
  --ms-danger:       #C62F21;
  --ms-danger-bg:    #FBE9E7;
  --ms-info:         #2B6CB0;
  --ms-info-bg:      #E8F0F9;

  /* — Alias sémantiques d'usage — */
  --text-primary:    var(--ms-ink);
  --text-secondary:  var(--ms-steel);
  --text-muted:      var(--ms-slate);
  --text-on-brand:   #FFFFFF;
  --text-on-dark:    var(--ms-paper);
  --text-link:       var(--ms-flame);

  --surface-page:    var(--ms-paper);
  --surface-card:    var(--ms-white);
  --surface-sunken:  var(--ms-cloud);
  --surface-dark:    var(--ms-ink);
  --surface-brand:   var(--ms-flame);

  --border-default:  var(--ms-fog);
  --border-strong:   var(--ms-ink);
  --border-focus:    var(--ms-flame);

  --action-primary:        var(--ms-flame);
  --action-primary-hover:  #D14730;
  --action-primary-active: #B93D29;
}

/* ========================== typography.css ========================== */
/* (l'@import Google Fonts d'origine est volontairement retiré — cf. polices.css) */
:root {
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-sans:    'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Échelle (ratio ~1.25) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;
  --text-5xl:  61px;

  /* Styles composés */
  --display-weight: 900;
  --display-tracking: -0.02em;
  --display-leading: 0.95;
  --display-case: uppercase;

  --heading-weight: 800;
  --heading-tracking: -0.015em;
  --heading-leading: 1.1;

  --body-leading: 1.6;

  --label-tracking: 0.08em;
  --label-case: uppercase;
  --label-weight: 600;
  --label-size: var(--text-xs);
}

/* ============================ spacing.css ============================ */
:root {
  /* Espacement (base 4px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Rayons */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Conteneurs */
  --container-max: 1200px;
  --content-measure: 68ch;
}

/* ============================ effects.css ============================ */
:root {
  /* Ombres — discrètes, jamais colorées */
  --shadow-sm:  0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md:  0 4px 12px rgba(20, 20, 20, 0.08);
  --shadow-lg:  0 12px 32px rgba(20, 20, 20, 0.12);
  --shadow-xl:  0 24px 64px rgba(20, 20, 20, 0.18);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(234, 84, 56, 0.25);

  /* Transitions */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-med:  200ms;
}

/* ============================== base.css ============================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--action-primary-hover); text-decoration: underline; }

::selection { background: rgba(250, 181, 55, 0.4); }