/* ==========================================================================
   FOOT FACTORY — TOKENS
   DA principale : noire. Les DA contextuelles (bleue Trophée/HKZ, orange
   Scoutify) se posent via [data-accent] sur <body> ou sur une section.
   ========================================================================== */

:root {
  /* ---- Noir ---- */
  --ff-ink:        #050507;
  --ff-ink-900:    #0a0a0e;
  --ff-ink-800:    #101016;
  --ff-ink-700:    #16161e;
  --ff-ink-600:    #1e1e28;
  --ff-ink-500:    #2a2a36;

  /* ---- Blanc ---- */
  --ff-bone:       #f4f3ef;
  --ff-bone-80:    rgba(244, 243, 239, 0.8);
  --ff-bone-60:    rgba(244, 243, 239, 0.6);
  --ff-bone-45:    rgba(244, 243, 239, 0.45);
  --ff-bone-28:    rgba(244, 243, 239, 0.28);
  --ff-bone-14:    rgba(244, 243, 239, 0.14);
  --ff-bone-08:    rgba(244, 243, 239, 0.08);

  /* ---- Couleurs de marque ---- */
  --ff-blue:       #2f6bff;   /* Trophées + HKZ */
  --ff-blue-deep:  #0b1f5c;
  --ff-blue-glow:  #5b8cff;
  --ff-orange:     #f4791f;   /* Scoutify */
  --ff-orange-deep:#b4520c;

  /* ---- Sémantique ---- */
  --bg:            var(--ff-ink);
  --bg-raised:     var(--ff-ink-800);
  --bg-card:       var(--ff-ink-700);
  --text:          var(--ff-bone);
  --text-2:        var(--ff-bone-60);
  --text-3:        var(--ff-bone-45);
  --line:          var(--ff-bone-14);
  --line-soft:     var(--ff-bone-08);

  /* Accent par défaut = blanc (DA noire pure) */
  --accent:        var(--ff-bone);
  --accent-ink:    var(--ff-ink);
  --accent-glow:   rgba(244, 243, 239, 0.16);

  /* ---- Typo ---- */
  --font-display: "Clash Display", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "General Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-mega:    clamp(3.5rem, 1.1rem + 10.5vw, 12rem);
  --fs-xl:      clamp(2.75rem, 1.4rem + 5.8vw, 7rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  --fs-h2:      clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --fs-h4:      clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78125rem;
  --fs-eyebrow: 0.6875rem;

  --lh-mega: 0.86;
  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.72;

  --ls-mega: -0.045em;
  --ls-tight: -0.028em;
  --ls-eyebrow: 0.22em;
  --ls-wide: 0.08em;

  /* ---- Espace ---- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;    --s11: 11rem;

  --pad-y:   clamp(4.5rem, 3rem + 5vw, 9.5rem);
  --pad-x:   clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --max:     88rem;
  --max-text: 46rem;

  /* ---- Rayons ---- */
  --r-xs: 0.25rem; --r-sm: 0.5rem; --r-md: 0.875rem;
  --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 999px;

  /* ---- Ombres ---- */
  --sh-sm: 0 2px 10px rgba(0,0,0,.4);
  --sh-md: 0 14px 44px rgba(0,0,0,.48);
  --sh-lg: 0 34px 90px rgba(0,0,0,.6);

  /* ---- Mouvement ---- */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
  --t-fast: 180ms; --t: 420ms; --t-slow: 760ms; --t-xslow: 1100ms;

  /* ---- Z ---- */
  --z-head: 100; --z-drawer: 200; --z-modal: 300;
}

/* ---- DA bleue : Trophées, HKZ ---- */
[data-accent="blue"] {
  --accent:      var(--ff-blue);
  --accent-ink:  #ffffff;
  --accent-glow: rgba(47, 107, 255, 0.28);
}

/* ---- DA orange : Scoutify ---- */
[data-accent="orange"] {
  --accent:      var(--ff-orange);
  --accent-ink:  #120800;
  --accent-glow: rgba(244, 121, 31, 0.26);
}

/* ---- Fond bleu profond (pages Trophée) ---- */
[data-surface="blue"] {
  --bg:        #030818;
  --bg-raised: #06102b;
  --bg-card:   #091740;
  --line:      rgba(91, 140, 255, 0.2);
  --line-soft: rgba(91, 140, 255, 0.11);
}

/* Mobile : tailles de titres réduites pour que les mots longs
   (COLLABORATIONS, COMMUNICATION…) tiennent dans l'écran. */
@media (max-width: 520px) {
  :root {
    --fs-mega: clamp(2.4rem, 11vw, 3.5rem);
    --fs-xl:   clamp(1.1rem, 6vw, 2.5rem);
    --fs-h1:   clamp(1.2rem, 6vw, 2.25rem);
    --fs-h2:   clamp(1.2rem, 5.6vw, 1.875rem);
  }
}