/* ==========================================================================
   BAARA KUMA — DESIGN TOKENS  (v2.0 · octobre 2026)
   --------------------------------------------------------------------------
   Source unique de vérité : couleurs, typographie, espacements, rayons,
   ombres et transitions. Tous les autres fichiers (bk-base, bk-components,
   bk-pages) n'utilisent QUE ces variables.
   Pour changer une couleur ou une taille sur tout le site : modifier ici.
   ========================================================================== */

:root{
  /* ---------- Couleurs du logo (valeurs mesurées sur LOGO-1.jpeg) -------- */
  --bk-brand-blue:    #009CD0;  /* « Baara »  – icônes, accents, décor     */
  --bk-brand-orange:  #F07D2D;  /* « kuma »   – badges, filets, puces      */
  --bk-brand-gray:    #ACACAC;  /* symbole    – éléments décoratifs        */

  /* ---------- Bleu Baara : confiance, navigation, actions principales ---- */
  --bk-blue-50:  #E8F6FB;
  --bk-blue-100: #CDEBF6;
  --bk-blue-500: var(--bk-brand-blue);
  --bk-blue-600: #0079A6;       /* liens + boutons principaux (4,9:1 sur blanc) */
  --bk-blue-700: #00618A;       /* survol                                       */
  --bk-blue-800: #004C6D;       /* appui (active)                               */

  /* ---------- Orange Kuma : attirer l'attention, actions prioritaires ---- */
  --bk-orange-50:  #FEF1E8;
  --bk-orange-100: #FCDDC7;
  --bk-orange-500: var(--bk-brand-orange);
  --bk-orange-600: #C2540C;     /* fond des boutons prioritaires (4,6:1)        */
  --bk-orange-700: #A3460A;     /* survol                                       */

  /* ---------- Neutres ---------------------------------------------------- */
  --bk-ink:        #202124;     /* titres                                       */
  --bk-text:       #3D4451;     /* texte courant (10:1)                         */
  --bk-muted:      #5F6672;     /* métadonnées, aides (5,8:1)                   */
  --bk-subtle:     #8A919C;     /* placeholders, icônes discrètes               */
  --bk-border:     #E4E7EC;
  --bk-border-strong: #D0D5DD;
  --bk-surface:    #F5F7FA;     /* fonds de sections                            */
  --bk-surface-2:  #EEF2F6;     /* champs, puces neutres                        */
  --bk-white:      #FFFFFF;

  /* ---------- États ------------------------------------------------------ */
  --bk-success: #1E7F4F;  --bk-success-bg: #E7F5EE;
  --bk-danger:  #B42318;  --bk-danger-bg:  #FDECEA;
  --bk-warning: #8A5300;  --bk-warning-bg: #FFF4E0;

  /* ---------- Rôles (à utiliser dans les composants) --------------------- */
  --bk-color-link:        var(--bk-blue-600);
  --bk-color-link-hover:  var(--bk-blue-700);
  --bk-color-primary:     var(--bk-blue-600);
  --bk-color-accent:      var(--bk-orange-600);
  --bk-color-heading:     var(--bk-ink);
  --bk-color-body:        var(--bk-text);
  --bk-focus-ring:        0 0 0 3px rgba(0,156,208,.40);

  /* ---------- Typographie ------------------------------------------------ */
  --bk-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bk-fs-h1:   clamp(2rem,     1.45rem + 2.2vw,  3.5rem);   /* 32 → 56 px */
  --bk-fs-h2:   clamp(1.625rem, 1.3rem  + 1.3vw,  2.375rem); /* 26 → 38 px */
  --bk-fs-h3:   clamp(1.25rem,  1.12rem + .55vw,  1.5rem);   /* 20 → 24 px */
  --bk-fs-h4:   clamp(1.125rem, 1.07rem + .25vw,  1.25rem);  /* 18 → 20 px */
  --bk-fs-h5:   1.0625rem;                                    /* 17 px      */
  --bk-fs-h6:   1rem;                                         /* 16 px      */
  --bk-fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);      /* 17 → 20 px */
  --bk-fs-body: 1rem;        /* 16 px  */
  --bk-fs-sm:   .875rem;     /* 14 px  */
  --bk-fs-xs:   .8125rem;    /* 13 px  */
  --bk-fs-nav:  .9375rem;    /* 15 px  */

  --bk-fw-regular: 400;
  --bk-fw-medium:  500;
  --bk-fw-semi:    600;
  --bk-fw-bold:    700;

  --bk-lh-tight: 1.2;
  --bk-lh-snug:  1.35;
  --bk-lh-body:  1.65;
  --bk-ls-tight: -0.02em;

  /* ---------- Espacements (base 4 px) ------------------------------------ */
  --bk-space-1: 4px;   --bk-space-2: 8px;   --bk-space-3: 12px;
  --bk-space-4: 16px;  --bk-space-5: 20px;  --bk-space-6: 24px;
  --bk-space-7: 32px;  --bk-space-8: 40px;  --bk-space-9: 48px;
  --bk-space-10: 64px; --bk-space-11: 80px; --bk-space-12: 96px;
  --bk-section-y: clamp(48px, 2.5rem + 2.5vw, 80px);
  --bk-container: 1200px;
  --bk-gutter: 16px;

  /* ---------- Rayons ----------------------------------------------------- */
  --bk-radius-sm: 6px;
  --bk-radius-md: 10px;
  --bk-radius-lg: 14px;
  --bk-radius-xl: 20px;
  --bk-radius-pill: 999px;

  /* ---------- Ombres ----------------------------------------------------- */
  --bk-shadow-xs:    0 1px 2px rgba(16,24,40,.05);
  --bk-shadow-card:  0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --bk-shadow-hover: 0 14px 28px -10px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.05);
  --bk-shadow-pop:   0 18px 40px -12px rgba(16,24,40,.22);

  /* ---------- Transitions ------------------------------------------------ */
  --bk-ease: cubic-bezier(.2,.7,.3,1);
  --bk-t-fast: 150ms var(--bk-ease);
  --bk-t-base: 200ms var(--bk-ease);
  --bk-t-slow: 300ms var(--bk-ease);

  /* ---------- Composants ------------------------------------------------- */
  --bk-control-h:  48px;   /* champs et boutons standard */
  --bk-control-h-sm: 38px;
  --bk-header-h:   76px;
}

@media (max-width: 767px){
  :root{ --bk-control-h: 46px; --bk-header-h: 64px; }
}

/* Mouvement réduit : on coupe animations et transitions */
@media (prefers-reduced-motion: reduce){
  :root{ --bk-t-fast: 0ms linear; --bk-t-base: 0ms linear; --bk-t-slow: 0ms linear; }
}