/* ═══════════════════════════════════════════════════════════════
   JANAA — DESIGN TOKENS
   Identité industrielle (réf. DeWalt / Klein Tools / Milwaukee)
   Charcoal + Jaune signal · Off-white · Vert = logo uniquement
   Refonte identité 2026-06-02 (remplace l'ancien thème vert/General Sans)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── PALETTE DE MARQUE ──────────────────────────────────────── */
  --color-charcoal:      #1F2937;   /* emphase principale (hero, bandeaux, nav) */
  --color-charcoal-deep: #111827;   /* footer, sections sombres profondes */
  --color-signal:        #F5C518;   /* JAUNE SIGNAL — accent unique */
  --color-signal-bright: #FFD534;   /* hover / état clair */
  --color-signal-deep:   #C99A06;   /* jaune foncé (texte jaune sur fond clair si requis) */
  --color-white:         #FFFFFF;
  --color-offwhite:      #F5F5F4;   /* fond dominant du site */
  --color-gray-text:     #6B7280;   /* texte secondaire */
  --color-gray-border:   #D6D3D1;   /* bordures */
  --color-green-janaa:   #1B5E20;   /* ⚠ LOGO + signature de marque UNIQUEMENT */

  /* Échelle neutre (warm-neutral, basée off-white → charcoal) */
  --color-ink-50:    #F5F5F4;   /* off-white (fond) */
  --color-ink-100:   #ECEBE7;
  --color-ink-200:   #D6D3D1;   /* = gris bordures */
  --color-ink-300:   #B7B4AE;
  --color-ink-400:   #8A8881;
  --color-ink-500:   #6B7280;   /* = gris texte secondaire */
  --color-ink-600:   #4B5563;
  --color-ink-700:   #374151;
  --color-ink-800:   #1F2937;   /* = charcoal */
  --color-ink-900:   #111827;   /* = charcoal profond */

  /* ── REMAP LEGACY --color-vert-* ────────────────────────────────
     L'ancien thème utilisait une échelle de VERTS comme accent partout
     (boutons, badges, bullets, hovers). La nouvelle identité veut du
     JAUNE SIGNAL en accent et du CHARCOAL en "accent profond / texte".
     On repointe donc l'échelle vert-* :
       • teintes claires/moyennes (50-500) → jaune signal & ses tints
         (fonds remplis → texte foncé = contraste OK)
       • teintes foncées (600-900, utilisées comme TEXTE sur fond clair)
         → charcoal (jaune en texte serait illisible sur blanc)
     Cela applique l'identité aux centaines de var(--color-vert-XXX)
     existantes SANS toucher components.css ni le HTML.
     Le vrai vert ne subsiste QUE dans --color-green-janaa (logo). */
  --color-vert-50:   #FEFCE8;   /* wash jaune très pâle */
  --color-vert-100:  #FCEFBE;   /* tint jaune clair (bg badge/avatar + texte charcoal) */
  --color-vert-200:  #FBE48A;   /* tint jaune (bg bullet) */
  --color-vert-300:  #F7D34E;   /* jaune lisible sur charcoal (eyebrow theme-deep) */
  --color-vert-400:  #FFD21A;   /* signal clair (hover) */
  --color-vert-500:  #F5C518;   /* SIGNAL (fond bouton/badge) */
  --color-vert-600:  #374151;   /* → charcoal moyen */
  --color-vert-700:  #1F2937;   /* → charcoal (texte accent sur fond clair) */
  --color-vert-800:  #111827;   /* → charcoal profond */
  --color-vert-900:  #0B0F17;

  /* Accents fonctionnels */
  --color-amber:     #F5C518;   /* étoiles d'avis = jaune signal (jaune unique) */
  --color-amber-soft:#FCEFBE;
  --color-red:       #E5484D;   /* alertes seules */

  /* ── SÉMANTIQUE ─────────────────────────────────────────────── */
  --bg:              var(--color-offwhite);   /* fond clair dominant */
  --bg-elevated:     #FFFFFF;
  --bg-deep:         var(--color-charcoal-deep);
  --bg-deep-2:       var(--color-charcoal);
  --fg:              var(--color-charcoal);   /* texte charcoal sur fond clair */
  --fg-muted:        var(--color-gray-text);
  --fg-subtle:       var(--color-ink-400);
  --fg-on-deep:      var(--color-offwhite);
  --accent:          var(--color-signal);     /* JAUNE — accent unique */
  --accent-deep:     var(--color-charcoal);   /* "accent profond" = charcoal (texte/icônes lisibles) */

  /* Hairlines */
  --line:            color-mix(in srgb, var(--color-charcoal) 12%, transparent);
  --line-strong:     color-mix(in srgb, var(--color-charcoal) 22%, transparent);
  --line-on-deep:    color-mix(in srgb, #fff 12%, transparent);

  /* ── TYPOGRAPHIE ────────────────────────────────────────────── */
  /* Archivo (grotesque industriel) pour les titres, Inter pour le corps */
  --font-display:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Aucune mono autorisée (mémoire) — alias vers le corps */
  --font-mono:       'Inter', system-ui, sans-serif;

  /* Type scale — fluid clamp() */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.875rem;
  --fs-4xl:   clamp(2rem, 2vw + 1.5rem, 2.5rem);
  --fs-5xl:   clamp(2.5rem, 3vw + 1.5rem, 3.5rem);
  --fs-6xl:   clamp(3rem, 4vw + 1.5rem, 4.5rem);
  --fs-display:clamp(2.75rem, 4.5vw + 0.5rem, 5rem);   /* hero H1 */

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed:1.6;

  /* Letter-spacing — industriel : titres serrés, labels uppercase légèrement espacés */
  --ls-tighter: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.1em;      /* eyebrow / labels uppercase */
  --ls-widest:  0.18em;

  /* ── ESPACEMENT ─────────────────────────────────────────────── */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.25rem;
  --s-6:   1.5rem;
  --s-8:   2rem;
  --s-12:  3rem;
  --s-16:  4rem;
  --s-20:  5rem;
  --s-24:  6rem;
  --s-32:  8rem;
  --s-40:  10rem;
  --s-48:  12rem;

  --section-py: clamp(5.5rem, 10vw, 10rem);

  /* Container */
  --container:   1280px;
  --container-x: clamp(1.25rem, 4vw, 3rem);

  /* ── RADIUS (coins nets — industriel, "pas de coins arrondis partout") ── */
  --r-1:   0.125rem;   /* 2px */
  --r-2:   0.25rem;    /* 4px */
  --r-3:   0.3125rem;  /* 5px */
  --r-4:   0.375rem;   /* 6px */
  --r-6:   0.625rem;   /* 10px */
  --r-8:   0.875rem;   /* 14px */
  --r-pill:0.25rem;    /* 4px — ex-pilule : désormais coin net (boutons, badges, nav) */

  --r-outer:  0.875rem;
  --r-inner:  calc(var(--r-outer) - 0.375rem);

  /* ── OMBRES (douces, ambiantes) ─────────────────────────────── */
  --shadow-xs:   0 1px 2px color-mix(in srgb, var(--color-charcoal-deep) 5%, transparent);
  --shadow-sm:   0 2px 8px color-mix(in srgb, var(--color-charcoal-deep) 7%, transparent);
  --shadow-md:   0 8px 24px color-mix(in srgb, var(--color-charcoal-deep) 9%, transparent);
  --shadow-lg:   0 24px 48px -8px color-mix(in srgb, var(--color-charcoal-deep) 12%, transparent);
  --shadow-xl:   0 32px 80px -12px color-mix(in srgb, var(--color-charcoal-deep) 16%, transparent);

  --inset-light: inset 0 1px 1px color-mix(in srgb, #fff 55%, transparent);
  --inset-deep:  inset 0 1px 1px color-mix(in srgb, #fff 8%, transparent);

  /* ── MOUVEMENT ──────────────────────────────────────────────── */
  --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-quick:      200ms;
  --dur-base:       400ms;
  --dur-slow:       700ms;
  --dur-slower:     1000ms;

  /* ── Z-INDEX ────────────────────────────────────────────────── */
  --z-sticky:  20;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
  --z-noise:   70;
}

/* ── SECTIONS SOMBRES (fond charcoal) ─────────────────────────── */
.theme-deep {
  --bg:           var(--color-charcoal);
  --bg-elevated:  var(--color-charcoal-deep);
  --fg:           var(--color-offwhite);
  --fg-muted:     color-mix(in srgb, #fff 65%, transparent);
  --fg-subtle:    color-mix(in srgb, #fff 45%, transparent);
  --line:         var(--line-on-deep);
  /* --accent reste le jaune signal : contraste optimal sur charcoal */
  --accent-deep:  var(--color-signal);
}