/* ============================================================
   tokens.css — Design tokens (variables CSS)
   Source de vérité unique pour couleurs, typographie, espaces.
   Modifier ici impacte tout le site.
   ============================================================ */

:root {
  /* === Couleurs : anthracite violacé (texte) ============== */
  --color-ink-deepest: #1a0d1c;
  --color-ink:         #231226;
  --color-ink-soft:    #534654;
  --color-ink-muted:   #928294;

  /* === Couleurs : mauves (accent principal) =============== */
  --color-accent-deep: #44154a;
  --color-accent:      #89487c;
  --color-accent-mid:  #a75897;
  --color-accent-soft: #c692bc;
  --color-accent-pale: #c0b4c2;
  --color-accent-bg:   #ece4ed;

  /* === Couleurs : fonds chauds ============================ */
  --color-bg:          #fbfbf7;
  --color-bg-tint:     #faf7fb;
  --color-bg-alt:      #edece4;
  --color-surface:     #ffffff;
  --color-border:      #e5e0d8;
  --color-border-soft: rgba(35, 18, 38, 0.08);

  /* === Couleurs : sémantiques ============================= */
  --color-success:      #27a36b;
  --color-success-deep: #105927;
  --color-burgundy:     #801929;
  --color-warning:      #c89b5a;

  /* === Typographie : familles =============================
     Deux polices seulement :
     - --font-display : "Playwrite NZ Basic" → tous les titres (cursif élégant)
     - --font-body    : "Satoshi"            → tout le reste (corps, UI, boutons…)
     L'alias --font-ui pointe sur --font-body pour le code existant.
  ============================================================ */
  --font-display: "Playwrite NZ Basic", "Brush Script MT", cursive;
  --font-body:    "Satoshi", "Satoshi Placeholder", system-ui, -apple-system, sans-serif;
  --font-ui:      var(--font-body);
  --font-script:  var(--font-display);

  /* === Typographie : graisses ============================= */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* === Typographie : tailles (mobile-first) =============== */
  --fs-xs:    0.75rem;     /* 12px — micro labels */
  --fs-sm:    0.8125rem;   /* 13px */
  --fs-base:  0.9375rem;   /* 15px — corps */
  --fs-md:    1rem;        /* 16px */
  --fs-lg:    1.125rem;    /* 18px */
  --fs-xl:    1.375rem;    /* 22px */
  --fs-2xl:   1.75rem;     /* 28px */
  --fs-3xl:   2.25rem;     /* 36px — H2 mobile */
  --fs-4xl:   2.75rem;     /* 44px — H1 mobile */
  --fs-5xl:   3.5rem;      /* 56px */

  /* === Typographie : interlignes ========================== */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* === Typographie : tracking ============================= */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-widest: 0.16em;   /* eyebrows en majuscules */

  /* === Espaces (échelle 4px) ============================== */
  --space-0:  0;
  --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;

  /* === Section padding (clamp = fluide selon viewport) ====
     --section-px : padding horizontal entre la box .container
                    et le bord de la viewport. 20px (mobile) → 80px (desktop).
     --section-py : padding vertical entre sections.
  */
  --section-py: clamp(3.5rem, 8vw, 7rem);
  --section-px: clamp(1.25rem, 5vw, 5rem);

  /* === Layout =============================================
     --container-max : largeur max de la box (.container).
                       Inclut le padding interne (box-sizing: border-box).
  */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-prose:  680px;   /* articles blog */

  /* === Coins arrondis ===================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* === Ombres ============================================= */
  --shadow-sm: 0 1px 2px rgba(35, 18, 38, 0.05), 0 1px 3px rgba(35, 18, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(35, 18, 38, 0.06), 0 2px 6px rgba(35, 18, 38, 0.04);
  --shadow-lg: 0 12px 32px rgba(35, 18, 38, 0.08), 0 4px 12px rgba(35, 18, 38, 0.05);
  --shadow-xl: 0 24px 60px rgba(35, 18, 38, 0.12), 0 8px 24px rgba(35, 18, 38, 0.06);

  /* === Animation ========================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;

  /* === Z-index ============================================
     Le header est AU-DESSUS de l'overlay : on garde ainsi le bouton
     toggle (MENU/FERMER) cliquable même quand l'overlay est ouvert.
  */
  --z-overlay: 500;
  --z-nav:     600;
  --z-modal:  1000;
}

/* === Tablet ============================================= */
@media (min-width: 768px) {
  :root {
    --fs-base:  1rem;        /* 16px */
    --fs-md:    1.0625rem;   /* 17px */
    --fs-lg:    1.25rem;     /* 20px */
    --fs-xl:    1.5rem;      /* 24px */
    --fs-2xl:   2rem;        /* 32px */
    --fs-3xl:   2.75rem;     /* 44px */
    --fs-4xl:   3.5rem;      /* 56px */
    --fs-5xl:   4.25rem;     /* 68px */
  }
}

/* === Desktop ============================================ */
@media (min-width: 1200px) {
  :root {
    --fs-3xl:   3.25rem;     /* 52px */
    --fs-4xl:   4rem;        /* 64px — H1 desktop */
    --fs-5xl:   5rem;        /* 80px — Hero XL */
  }
}

/* === Préférence de réduction d'animation =============== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}