/* ===========================================================
   TOKENS.CSS · Charte Les Moussaillons
   Aucun style ici, uniquement des variables.

   Le bleu marine est imposé par le client. Le laiton lui donne la
   chaleur qui manquerait à un marine seul, et le sable évite le
   blanc pur, trop froid à côté d'un bleu aussi profond.
   =========================================================== */

:root {
  /* ============= COULEURS ============= */
  --marine-nuit:  #0B1F33;   /* texte principal, fonds profonds */
  --marine:       #13395C;   /* bleu marine signature */
  --marine-clair: #1F5480;   /* liens, survols, aplats secondaires */
  /* Texte secondaire. La valeur est calée sur le fond le PLUS foncé où elle
     apparaît (--sable-bloc), pas sur le fond principal : réglée sur ce
     dernier, elle tombait à 4,1:1 dans les blocs, sous le seuil lisible.
     Ici : 4,6:1 sur --sable-bloc, 5,2:1 sur --sable. */
  --bleu-brume:   #52697D;
  --sable:        #F7F4EE;   /* fond principal, blanc cassé chaud */
  --sable-bloc:   #EDE7DB;   /* blocs, cartes posées sur le fond */
  --sable-clair:  #FBF9F5;
  --blanc:        #FFFFFF;

  /* Le laiton porte l'accent. Attention : #B98C46 ne passe pas le
     contraste 4.5:1 sur fond sable, il ne sert donc jamais à du texte
     sur fond clair, uniquement aux filets, puces et fonds de pastille.
     Pour du texte accentué sur fond clair, utiliser --laiton-texte. */
  --laiton:        #B98C46;
  --laiton-texte:  #7D5A1C;   /* 5,1:1 sur --sable-bloc, 5,7:1 sur --sable */
  --laiton-voile:  rgba(185, 140, 70, 0.14);
  --laiton-filet:  rgba(185, 140, 70, 0.35);

  /* Filets et bordures */
  --filet:        rgba(11, 31, 51, 0.13);
  --filet-fin:    rgba(11, 31, 51, 0.07);
  --filet-clair:  rgba(247, 244, 238, 0.22);

  /* Sémantique : c'est ce que les composants utilisent */
  --bg:           var(--sable);
  --bg-bloc:      var(--sable-bloc);
  --bg-fonce:     var(--marine-nuit);
  --text:         var(--marine-nuit);
  --text-soft:    var(--bleu-brume);
  --text-inverse: var(--sable);
  --accent:       var(--laiton);
  --accent-text:  var(--laiton-texte);
  --border:       var(--filet);

  /* États */
  --erreur:       #A03A2B;
  --erreur-bg:    rgba(160, 58, 43, 0.08);
  --succes:       #2C6148;
  --succes-bg:    rgba(44, 97, 72, 0.09);

  /* ============= TYPOGRAPHIE ============= */
  /* Titres : serif contemporaine, chaleureuse sans être ancienne.
     Le site doit inspirer confiance à des propriétaires, pas jouer
     au magazine de décoration. */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  /* Texte : sans serif neutre et très lisible, y compris en petit corps */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Plafonné à 60 px : au-delà, un titre de deux lignes ne tient plus à
     côté de la photo de la bannière et se casse en quatre. */
  --fs-display: clamp(34px, 4.6vw, 60px);
  --fs-h1:      clamp(30px, 4vw, 48px);
  --fs-h2:      clamp(26px, 3.2vw, 40px);
  --fs-h3:      clamp(20px, 2vw, 26px);
  --fs-h4:      clamp(17px, 1.4vw, 20px);
  --fs-lead:    clamp(17px, 1.4vw, 21px);
  --fs-body:    16px;
  --fs-small:   15px;
  --fs-micro:   13px;
  --fs-nano:    11px;

  --lh-tight:   1.1;
  --lh-snug:    1.28;
  --lh-normal:  1.6;
  --lh-loose:   1.75;

  /* Les petites capitales espacées font une bonne part de la tenue
     éditoriale de la marque : sur-titres, libellés, pastilles. */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.12em;
  --ls-xwide:   0.22em;

  /* ============= ESPACEMENTS ============= */
  /* Rythme de 4 px, comme le préconisent Material et les HIG. */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  128px;

  --section-y:  clamp(64px, 9vw, 128px);
  --container:  1240px;
  --container-narrow: 780px;
  --gutter:     clamp(20px, 5vw, 56px);

  /* ============= FORMES ============= */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  --ombre-douce:  0 2px 10px rgba(11, 31, 51, 0.05);
  --ombre-carte:  0 12px 34px rgba(11, 31, 51, 0.09);
  --ombre-haute:  0 24px 64px rgba(11, 31, 51, 0.16);

  /* ============= MOUVEMENT ============= */
  /* 150 à 300 ms pour les micro-interactions, sortie plus rapide que
     l'entrée pour que l'interface reste vive. */
  --t-fast:  150ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-base:  240ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-slow:  380ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ============= COUCHES ============= */
  /* Une échelle explicite évite les z-index inventés au fil de l'eau. */
  --z-base:     1;
  --z-sticky:   100;
  --z-header:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-editor:   5000;
  --z-toast:    5100;
}