/* =========================================================================
   SOWLO — TOKENS DE MARQUE
   -------------------------------------------------------------------------
   Source : charte graphique Sowlo — « Palette CLAIRE, accent ambre ».
   Règle d'or : UN SEUL accent (l'ambre) + neutres.
   Le vert et le rouge sont STRICTEMENT fonctionnels (état payé / impayé).
   Jamais d'arc-en-ciel.

   Site vitrine  = punchy → ambre partout (hero, CTA, badges).
   Appli         = sobre  → ambre seulement sur les boutons d'action.

   ⚠️ C'est le seul fichier à toucher pour faire évoluer la marque.
   Ne jamais écrire une couleur en dur dans style.css.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. ACCENT — AMBRE (l'unique accent de marque)
     --------------------------------------------------------------------- */
  --c-accent:      #F59E0B;  /* aplats : boutons, bandeaux, pastilles      */
  --c-accent-hi:   #FFB02E;  /* survol d'un aplat ambre                    */
  --c-accent-ink:  #854F0B;  /* ⚠️ TEXTE/liens/icônes sur fond clair.
                                  #F59E0B ne passe PAS le contraste AA en
                                  texte : toujours utiliser cette variante. */
  --c-on-accent:   #4A2E05;  /* texte posé SUR l'ambre                     */
  --c-accent-wash: #FAEEDA;  /* fond de badge ambre clair                  */
  --c-coral:       #FF6B4A;  /* accent variante, à doser très légèrement   */

  /* ---------------------------------------------------------------------
     2. NEUTRES — fonds & encres
     --------------------------------------------------------------------- */
  --c-paper:   #FAF9F6;  /* fond de page, blanc cassé chaud */
  --c-paper-2: #F4F2EC;  /* section alternée                */
  --c-paper-3: #EDEAE2;  /* aplat appuyé                    */
  --c-white:   #FFFFFF;  /* documents, cartes surélevées    */

  --c-ink:   #1A1712;  /* texte principal, quasi-noir chaud */
  --c-ink-2: #45403A;  /* texte courant                     */
  --c-ink-3: #6B665C;  /* texte secondaire, gris chaud      */

  /* Bordures : fine · moyenne · forte */
  --c-line:        #EDEAE2;
  --c-line-2:      #E3E0D8;
  --c-line-strong: #CFC9BC;

  /* ---------------------------------------------------------------------
     3. ÉTATS FONCTIONNELS — usage réservé (jamais décoratif)
     --------------------------------------------------------------------- */
  --c-ok:        #16A34A;  /* encaissé / payé          */
  --c-ok-ink:    #166534;  /* idem, en texte           */
  --c-ko:        #E11D48;  /* impayé / échec           */
  --c-ko-ink:    #9F1239;  /* idem, en texte           */

  /* ---------------------------------------------------------------------
     4. PALETTE SOMBRE — sections inversées du site
     --------------------------------------------------------------------- */
  --c-dark:         #0E0E10;
  --c-dark-2:       #17171A;
  --c-dark-line:    #2A2A2E;
  --c-on-dark:      #EDEDED;
  --c-on-dark-2:    #8A8A90;
  --c-accent-dark:  #FF8A3D;  /* ambre sur fond sombre            */
  --c-on-accent-dark: #3A1E05;
  --c-ok-dark:      #34C36B;
  --c-ko-dark:      #F0567A;

  /* ---------------------------------------------------------------------
     5. TYPOGRAPHIE
     ⚠️ La charte reçue ne fixe pas de polices — proposition à valider.
     --------------------------------------------------------------------- */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:    "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --w-normal: 400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;

  --t-hero:  clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --t-h1:    clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --t-h2:    clamp(1.75rem, 1.3rem + 2.1vw, 2.9rem);
  --t-h3:    clamp(1.3rem,  1.1rem + 0.9vw, 1.75rem);
  --t-h4:    clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --t-body:  clamp(1rem,    0.97rem + 0.15vw, 1.0625rem);
  --t-lead:  clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* ---------------------------------------------------------------------
     6. GÉOMÉTRIE
     --------------------------------------------------------------------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --bw: 1px;

  --sh-sm: 0 1px 2px rgba(26,23,18,.06);
  --sh-md: 0 2px 4px rgba(26,23,18,.05), 0 8px 20px -8px rgba(26,23,18,.12);
  --sh-lg: 0 4px 8px rgba(26,23,18,.05), 0 24px 48px -16px rgba(26,23,18,.18);
  --sh-accent: 0 6px 20px -6px rgba(245,158,11,.45);

  /* ---------------------------------------------------------------------
     7. RYTHME & MISE EN PAGE
     --------------------------------------------------------------------- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;

  --section-y: clamp(4rem, 2rem + 7vw, 8rem);
  --wrap: 1200px;
  --wrap-text: 68ch;
  --gutter: clamp(1.25rem, .5rem + 3vw, 3rem);
  --header-h: 72px;

  /* ---------------------------------------------------------------------
     8. MOUVEMENT
     --------------------------------------------------------------------- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms;
}