/**
 * Axialys Design System — Design Tokens
 * Version 1.0 — 2026
 *
 * Toutes les valeurs fondamentales du design system Axialys.
 * Importer ce fichier en premier dans tout projet Axialys.
 *
 * Convention : --ax-{catégorie}-{sous-catégorie}-{valeur}
 */

:root {

  /* ============================================================
   * COULEURS — PRIMAIRE (Navy #211D6D)
   * ============================================================ */

  --ax-color-primary-50:  #F1F0FB;
  --ax-color-primary-100: #E2E1F7;
  --ax-color-primary-200: #C5C3EF;
  --ax-color-primary-300: #9895E0;
  --ax-color-primary-400: #6B67CF;
  --ax-color-primary-500: #211D6D; /* ← Couleur de marque principale */
  --ax-color-primary-600: #1B1859;
  --ax-color-primary-700: #141345;
  --ax-color-primary-800: #0E0D31;
  --ax-color-primary-900: #08071D;

  /* ============================================================
   * COULEURS — ACCENT (Bleu #428BFE)
   * ============================================================ */

  --ax-color-accent-50:  #FEF3EC;
  --ax-color-accent-100: #FDE0C8;
  --ax-color-accent-200: #FBC195;
  --ax-color-accent-300: #F9A162;
  --ax-color-accent-400: #F58840;
  --ax-color-accent-500: #F17431; /* ← Couleur d'accent principale (CTA) */
  --ax-color-accent-600: #D85E1B; /* ← Hover */
  --ax-color-accent-700: #B84D16;
  --ax-color-accent-800: #8F3B10;
  --ax-color-accent-900: #662A0B;

  /* ============================================================
   * COULEURS — NEUTRES
   * ============================================================ */

  --ax-color-neutral-0:    #FFFFFF;
  --ax-color-neutral-50:   #F8FAFB;
  --ax-color-neutral-100:  #F1F3F5;
  --ax-color-neutral-200:  #E9ECEF; /* ≈ #000000 à 20% (charte) */
  --ax-color-neutral-300:  #DEE2E6;
  --ax-color-neutral-400:  #CED4DA;
  --ax-color-neutral-500:  #ADB5BD;
  --ax-color-neutral-600:  #868E96;
  --ax-color-neutral-700:  #495057;
  --ax-color-neutral-800:  #343A40;
  --ax-color-neutral-900:  #212529;
  --ax-color-neutral-1000: #000000;

  /* ============================================================
   * COULEURS — SÉMANTIQUES
   * ============================================================ */

  /* Succès */
  --ax-color-success-50:  #F0FDF4;
  --ax-color-success-100: #DCFCE7;
  --ax-color-success-500: #22C55E;
  --ax-color-success-700: #15803D;

  /* Avertissement */
  --ax-color-warning-50:  #FFFBEB;
  --ax-color-warning-100: #FEF3C7;
  --ax-color-warning-500: #F59E0B;
  --ax-color-warning-700: #B45309;

  /* Erreur */
  --ax-color-error-50:  #FFF1F2;
  --ax-color-error-100: #FFE4E6;
  --ax-color-error-500: #EF4444;
  --ax-color-error-700: #B91C1C;

  /* Information — bleu indépendant de l'accent */
  --ax-color-info-50:  #EFF5FF;
  --ax-color-info-100: #D4E7FE;
  --ax-color-info-500: #428BFE;
  --ax-color-info-700: #0D58D4;

  /* Bleu Axialys (charte 2026 — usage illustrations, icônes, badges) */
  --ax-color-blue-50:  #EFF5FF;
  --ax-color-blue-100: #D4E7FE;
  --ax-color-blue-500: #428BFE;
  --ax-color-blue-700: #0D58D4;

  /* Focus ring CTA (bouton orange) */
  --ax-focus-ring-cta: 0 0 0 0.3rem rgba(0, 0, 0, 0.1);

  /* ============================================================
   * COULEURS — ALIAS SÉMANTIQUES (surfaces & textes)
   * ============================================================ */

  /* Surfaces */
  --ax-surface-page:          var(--ax-color-neutral-0);
  --ax-surface-subtle:        var(--ax-color-neutral-50);
  --ax-surface-muted:         var(--ax-color-neutral-100);
  --ax-surface-primary:       var(--ax-color-primary-500);
  --ax-surface-primary-light: var(--ax-color-primary-50);
  --ax-surface-accent:        var(--ax-color-accent-500);
  --ax-surface-accent-light:  var(--ax-color-accent-100);

  /* Textes */
  --ax-text-primary:   var(--ax-color-neutral-900);
  --ax-text-secondary: var(--ax-color-neutral-600);
  --ax-text-muted:     var(--ax-color-neutral-500);
  --ax-text-disabled:  var(--ax-color-neutral-400);
  --ax-text-inverse:   var(--ax-color-neutral-0);
  --ax-text-brand:     var(--ax-color-primary-500);
  --ax-text-accent:    var(--ax-color-accent-500);

  /* Bordures */
  --ax-border-subtle:  var(--ax-color-neutral-200);
  --ax-border-default: var(--ax-color-neutral-300);
  --ax-border-strong:  var(--ax-color-neutral-400);
  --ax-border-brand:   var(--ax-color-primary-500);
  --ax-border-accent:  var(--ax-color-accent-500);

  /* ============================================================
   * TYPOGRAPHIE — FAMILLES
   * ============================================================ */

  --ax-font-display: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --ax-font-body:    "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --ax-font-mono:    "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", ui-monospace, monospace;

  /* ============================================================
   * TYPOGRAPHIE — TAILLES (base 16px)
   * ============================================================ */

  --ax-font-size-xs:   0.75rem;   /*  12px */
  --ax-font-size-sm:   0.875rem;  /*  14px */
  --ax-font-size-base: 1rem;      /*  16px */
  --ax-font-size-lg:   1.125rem;  /*  18px */
  --ax-font-size-xl:   1.25rem;   /*  20px */
  --ax-font-size-2xl:  1.5rem;    /*  24px */
  --ax-font-size-3xl:  1.875rem;  /*  30px */
  --ax-font-size-4xl:  2.25rem;   /*  36px */
  --ax-font-size-5xl:  3rem;      /*  48px */
  --ax-font-size-6xl:  3.75rem;   /*  60px */
  --ax-font-size-7xl:  4.5rem;    /*  72px */

  /* ============================================================
   * TYPOGRAPHIE — GRAISSES
   * ============================================================ */

  --ax-font-weight-light:     300;
  --ax-font-weight-regular:   400;
  --ax-font-weight-medium:    500;
  --ax-font-weight-semibold:  600;  /* SF Pro supporte le 600 */
  --ax-font-weight-bold:      700;
  --ax-font-weight-extrabold: 800;
  --ax-font-weight-black:     900;

  /* ============================================================
   * TYPOGRAPHIE — INTERLIGNAGE
   * ============================================================ */

  --ax-line-height-tight:   1.25;
  --ax-line-height-snug:    1.375;
  --ax-line-height-normal:  1.5;
  --ax-line-height-relaxed: 1.625;
  --ax-line-height-loose:   2;

  /* ============================================================
   * TYPOGRAPHIE — ESPACEMENT DES LETTRES
   * ============================================================ */

  --ax-letter-spacing-tighter: -0.05em;
  --ax-letter-spacing-tight:   -0.025em;
  --ax-letter-spacing-normal:   0em;
  --ax-letter-spacing-wide:     0.025em;
  --ax-letter-spacing-wider:    0.05em;
  --ax-letter-spacing-widest:   0.1em;

  /* ============================================================
   * ESPACEMENT (base 4px)
   * ============================================================ */

  --ax-space-px:  1px;
  --ax-space-0:   0px;
  --ax-space-0-5: 0.125rem;  /*  2px */
  --ax-space-1:   0.25rem;   /*  4px */
  --ax-space-1-5: 0.375rem;  /*  6px */
  --ax-space-2:   0.5rem;    /*  8px */
  --ax-space-2-5: 0.625rem;  /* 10px */
  --ax-space-3:   0.75rem;   /* 12px */
  --ax-space-3-5: 0.875rem;  /* 14px */
  --ax-space-4:   1rem;      /* 16px */
  --ax-space-5:   1.25rem;   /* 20px */
  --ax-space-6:   1.5rem;    /* 24px */
  --ax-space-7:   1.75rem;   /* 28px */
  --ax-space-8:   2rem;      /* 32px */
  --ax-space-9:   2.25rem;   /* 36px */
  --ax-space-10:  2.5rem;    /* 40px */
  --ax-space-11:  2.75rem;   /* 44px */
  --ax-space-12:  3rem;      /* 48px */
  --ax-space-14:  3.5rem;    /* 56px */
  --ax-space-16:  4rem;      /* 64px */
  --ax-space-20:  5rem;      /* 80px */
  --ax-space-24:  6rem;      /* 96px */
  --ax-space-28:  7rem;      /* 112px */
  --ax-space-32:  8rem;      /* 128px */
  --ax-space-36:  9rem;      /* 144px */
  --ax-space-40:  10rem;     /* 160px */
  --ax-space-48:  12rem;     /* 192px */
  --ax-space-56:  14rem;     /* 224px */
  --ax-space-64:  16rem;     /* 256px */

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */

  --ax-radius-none: 0px;
  --ax-radius-sm:   0.25rem;   /*  4px */
  --ax-radius-md:   0.5rem;    /*  8px */
  --ax-radius-lg:   0.75rem;   /* 12px */
  --ax-radius-xl:   1rem;      /* 16px */
  --ax-radius-2xl:  1.5rem;    /* 24px */
  --ax-radius-3xl:  2rem;      /* 32px */
  --ax-radius-full: 9999px;

  /* ============================================================
   * OMBRES (ÉLÉVATION)
   * ============================================================ */

  --ax-shadow-none: none;
  --ax-shadow-xs:   0 1px 2px 0 rgba(33, 29, 109, 0.05);
  --ax-shadow-sm:   0 1px 3px 0 rgba(33, 29, 109, 0.08), 0 1px 2px -1px rgba(33, 29, 109, 0.06);
  --ax-shadow-md:   0 4px 6px -1px rgba(33, 29, 109, 0.08), 0 2px 4px -2px rgba(33, 29, 109, 0.06);
  --ax-shadow-lg:   0 10px 15px -3px rgba(33, 29, 109, 0.08), 0 4px 6px -4px rgba(33, 29, 109, 0.06);
  --ax-shadow-xl:   0 20px 25px -5px rgba(33, 29, 109, 0.1), 0 8px 10px -6px rgba(33, 29, 109, 0.06);
  --ax-shadow-2xl:  0 25px 50px -12px rgba(33, 29, 109, 0.18);
  --ax-shadow-inner: inset 0 2px 4px 0 rgba(33, 29, 109, 0.06);

  /* ============================================================
   * BREAKPOINTS (référence — à utiliser dans les media queries)
   * ============================================================ */

  /* --ax-breakpoint-sm:  640px  — petits mobiles  */
  /* --ax-breakpoint-md:  768px  — tablettes        */
  /* --ax-breakpoint-lg:  1024px — desktops         */
  /* --ax-breakpoint-xl:  1280px — grands écrans    */
  /* --ax-breakpoint-2xl: 1440px — très grands      */

  /* ============================================================
   * Z-INDEX
   * ============================================================ */

  --ax-z-below:    -1;
  --ax-z-base:      0;
  --ax-z-raised:   10;  /* éléments sticky */
  --ax-z-dropdown: 20;  /* menus déroulants */
  --ax-z-overlay:  30;  /* arrière-plan modal */
  --ax-z-modal:    40;  /* modals, drawers */
  --ax-z-toast:    50;  /* notifications */
  --ax-z-tooltip:  60;  /* tooltips */

  /* ============================================================
   * ANIMATION & TRANSITIONS
   * ============================================================ */

  --ax-duration-instant: 0ms;
  --ax-duration-fast:    100ms;
  --ax-duration-normal:  200ms;
  --ax-duration-slow:    300ms;
  --ax-duration-slower:  500ms;

  --ax-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ax-ease-enter:    cubic-bezier(0.0, 0, 0.2, 1);
  --ax-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ax-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
   * LAYOUT — CONTENEURS
   * ============================================================ */

  --ax-container-sm:  640px;
  --ax-container-md:  768px;
  --ax-container-lg:  1024px;
  --ax-container-xl:  1280px;
  --ax-container-2xl: 1440px;
  --ax-container-padding-x: var(--ax-space-6);   /* 24px mobile */

}

/* ============================================================
 * RESET DE BASE AXIALYS
 * ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--ax-font-body);
  font-size: var(--ax-font-size-base);
  font-weight: var(--ax-font-weight-regular);
  line-height: var(--ax-line-height-normal);
  color: var(--ax-text-primary);
  background-color: var(--ax-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 * UTILITAIRES DE BASE
 * ============================================================ */

.ax-container {
  width: 100%;
  max-width: var(--ax-container-xl);
  margin-inline: auto;
  padding-inline: var(--ax-container-padding-x);
}

@media (min-width: 1280px) {
  .ax-container {
    padding-inline: var(--ax-space-8); /* 32px desktop */
  }
}

.ax-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}