/* ============================================================
   Landing Formation — point d'entrée des jetons.

   La charte officielle vit dans tokens/ (importée telle quelle depuis
   InperfectEms/inperfect-dev, design system officiel du 2026-08-06).
   Ce fichier n'ajoute AUCUNE couleur : il se contente de rebrancher les
   noms de variables utilisés par styles.css sur les jetons officiels.

   Pourquoi cette couche : la page a été écrite sur l'ancienne charte
   (noir #090808, mauve #B387AF). Plutôt que de réécrire 400 lignes de
   CSS et risquer d'en casser une, on remappe une soixantaine d'alias.
   Toute nouvelle règle doit utiliser directement les jetons officiels
   (--ink-900, --mauve-500, --surface-page…), pas les alias ci-dessous.
   ============================================================ */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/layout.css");
@import url("tokens/academy.css");

/* ============================================================
   Correspondances — anciens noms → jetons officiels
   ============================================================ */
:root {
  /* ---------- Couleurs de marque ----------
     Les valeurs officielles remplacent celles de l'ancienne charte :
     noir #171717 (et non #090808), Opera Mauve #AA78A6 (et non #B387AF). */
  --noir:     var(--ink-900);
  --blanc:    var(--paper-0);
  --mauve:    var(--mauve-500);
  --noir-80:  var(--ink-700);
  --noir-60:  var(--ink-500);
  --mauve-80: var(--mauve-400);
  --mauve-60: var(--mauve-300);
  --mauve-40: #e3d0e1;              /* interpolé sur la rampe officielle */
  --mauve-20: var(--mauve-100);

  /* ---------- Accents ----------
     Sur le thème sombre Academy, l'accent monte d'un cran dans la rampe
     (mauve-400 au lieu de mauve-500) : 7,1:1 sur #171717. */
  --accent-a: var(--mauve-600);     /* texte accentué sur fond clair */
  --accent-b: var(--mauve-500);     /* aplats */

  /* ---------- Typographie ----------
     ⚠ Hiérarchie officielle INVERSÉE par rapport à l'ancienne charte :
     Apple Garamond porte les titres, Gilroy le corps et l'interface. */
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);

  --h2-size: var(--text-h2);
  --h3-size: var(--text-h3);

  /* ---------- Espacement (grille 4px) ----------
     Déclarés ici et non dans layout.css : la charte officielle ne fixe pas
     d'échelle d'espacement, c'est un besoin propre à cette page. */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Graisses (noms officiels : --fw-*) ---------- */
  --weight-regular: var(--fw-regular);
  --weight-medium:  var(--fw-medium);
  --weight-bold:    var(--fw-bold);

  /* ---------- Compléments typographiques ---------- */
  --text-2xs: 0.6875rem;          /* 11px, micro-mentions */
  --tracking-widest: 0.16em;       /* sur-titres en capitales espacées */

  /* ---------- Surface teintée ---------- */
  --surface-accent-soft: var(--mauve-100);

  /* ---------- Contrôles ---------- */
  --control-md: 44px;   /* cible tactile minimale */
  --control-lg: 52px;

  /* ---------- Rayons ---------- */
  --radius-xs: 4px;
  --radius-control: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card-lg: 20px;
  --radius-media: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  /* ---------- Bordures (teintées du noir officiel #171717) ---------- */
  --border-subtle:  rgba(23, 23, 23, 0.09);
  --border-default: rgba(23, 23, 23, 0.16);
  --border-strong:  var(--ink-900);
  --border-inverse: rgba(255, 255, 255, 0.18);
  --hairline:       rgba(23, 23, 23, 0.12);
  --hairline-soft:  rgba(23, 23, 23, 0.055);
  --hairline-light: rgba(255, 255, 255, 0.16);

  /* ---------- Élévation ---------- */
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(23, 23, 23, 0.08), 0 1px 2px rgba(23, 23, 23, 0.05);
  --shadow-md: 0 4px 14px rgba(23, 23, 23, 0.10), 0 2px 4px rgba(23, 23, 23, 0.06);
  --shadow-lg: 0 12px 30px rgba(23, 23, 23, 0.13), 0 4px 10px rgba(23, 23, 23, 0.07);
  --shadow-xl: 0 24px 60px rgba(23, 23, 23, 0.18), 0 8px 18px rgba(23, 23, 23, 0.10);
  --shadow-focus: 0 0 0 3px rgba(170, 120, 166, 0.45);   /* anneau Opera Mauve */

  /* ---------- Mouvement ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 340ms;

  /* ---------- Alias sémantiques de texte et surface ---------- */
  --text-primary:        var(--ink-900);
  --text-secondary:      var(--ink-700);
  --text-muted:          var(--ink-500);
  --text-inverse:        var(--paper-0);
  --text-inverse-muted:  var(--ink-300);
  --text-on-accent:      var(--ink-900);
  --surface-inverse:     var(--ink-900);

  /* ---------- CTA principal : dégradé du noir vers le mauve ----------
     Reconstruit sur la rampe officielle. Les trois arrêts restent assez
     sombres pour porter du texte blanc (7,4:1 en haut, 17,4:1 en bas). */
  --btn-accent-top:      var(--mauve-700);
  --btn-accent-mid:      #3a2b38;
  --btn-accent-bottom:   var(--ink-900);
  --btn-accent-top-h:    var(--mauve-600);
  --btn-accent-mid-h:    #463444;
  --btn-accent-bottom-h: #0d0d0d;

  --arrow-color: var(--ink-900);
}