/* ==========================================================================
   DijaStyle — Design tokens
   Source : DESIGN.md (Stitch « Dakar Tidy Living »), corrigé pour le contraste
   (WCAG 2.2 AA) et réduit aux rôles réellement utilisés.
   Toutes les classes du prototype sont préfixées « ds- » pour éviter les
   collisions avec woocommerce.css et les extensions.
   ========================================================================== */

:root {
  /* --- Marque (rose DijaStyle) ------------------------------------------ */
  --ds-rose-50: #fdf2f5;   /* rose-wash : fonds promo, sélection */
  --ds-rose-100: #fce4eb;
  --ds-rose-500: #df1b5b;  /* couleur de marque : CTA, prix (≥ 4.7:1 sur blanc) */
  --ds-rose-600: #c2134d;  /* survol CTA, texte rose sur fond teinté (6:1) */
  --ds-rose-700: #9e0f3f;  /* actif */

  /* --- Accents fonctionnels -------------------------------------------- */
  --ds-teal-50: #e0f7fa;
  --ds-teal-700: #00707c;  /* « Nouveau », info (5.2:1 sur teal-50) */
  --ds-green-50: #e8f5e9;
  --ds-green-700: #166921; /* en stock, succès (6:1 sur green-50) */
  --ds-wa-700: #1a7f45;    /* bouton WhatsApp : blanc lisible (5:1). #25D366 échoue (2:1) */
  --ds-wa-800: #13663a;
  --ds-amber-50: #fff7e6;
  --ds-amber-800: #8a4b00; /* avertissement */
  --ds-red-50: #fdecea;
  --ds-red-700: #b3261e;   /* erreur */

  /* --- Neutres ---------------------------------------------------------- */
  --ds-white: #ffffff;
  --ds-gray-25: #f9f9fb;   /* fond de page */
  --ds-gray-50: #f3f4f6;   /* zones groupées, skeleton */
  --ds-gray-200: #e5e7eb;  /* bordures */
  --ds-gray-300: #d1d5db;  /* bordures fortes, champs */
  --ds-gray-500: #6b7280;  /* texte tertiaire (remplace #9CA3AF : 2.5:1 → 4.8:1) */
  --ds-gray-600: #4b5563;  /* texte secondaire */
  --ds-gray-800: #1f2937;  /* texte courant */
  --ds-gray-900: #111827;  /* titres */

  /* --- Rôles sémantiques (à utiliser dans les composants) --------------- */
  --ds-bg: var(--ds-gray-25);
  --ds-surface: var(--ds-white);
  --ds-surface-muted: var(--ds-gray-50);
  --ds-border: var(--ds-gray-200);
  --ds-border-strong: var(--ds-gray-300);
  --ds-text: var(--ds-gray-800);
  --ds-text-strong: var(--ds-gray-900);
  --ds-text-muted: var(--ds-gray-600);
  --ds-text-subtle: var(--ds-gray-500);
  --ds-brand: var(--ds-rose-500);
  --ds-brand-hover: var(--ds-rose-600);
  --ds-brand-text: var(--ds-rose-600);
  --ds-price: var(--ds-rose-600);
  --ds-focus: var(--ds-rose-600);

  /* --- Typographie ------------------------------------------------------ */
  /* Plus Jakarta Sans (proposé par Stitch). À auto-héberger dans le thème
     (woff2, font-display: swap) ; la pile de secours évite le texte invisible. */
  --ds-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ds-fs-xs: 0.75rem;     /* 12px — minimum absolu (mentions) */
  --ds-fs-sm: 0.875rem;    /* 14px — méta, libellés secondaires */
  --ds-fs-md: 1rem;        /* 16px — texte courant, champs (évite le zoom iOS) */
  --ds-fs-lg: 1.125rem;    /* 18px */
  --ds-fs-xl: 1.375rem;    /* 22px */
  --ds-fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* 24 → 32 */
  --ds-fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);     /* 28 → 40 */
  --ds-lh-tight: 1.2;
  --ds-lh-snug: 1.35;
  --ds-lh-body: 1.6;
  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-fw-black: 800;

  /* --- Espacements (échelle 4/8) ----------------------------------------- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-gutter: 1rem;               /* marges latérales mobile */
  --ds-grid-gap: 0.75rem;
  --ds-container: 80rem;           /* 1280px */
  --ds-section-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  /* --- Formes ----------------------------------------------------------- */
  --ds-radius-sm: 0.375rem;
  --ds-radius: 0.5rem;             /* champs, boutons */
  --ds-radius-md: 0.75rem;         /* images de carte */
  --ds-radius-lg: 1rem;            /* cartes, panneaux */
  --ds-radius-xl: 1.5rem;          /* feuilles/tiroirs */
  --ds-radius-pill: 999px;

  /* --- Élévation -------------------------------------------------------- */
  --ds-shadow-1: 0 1px 3px rgb(17 24 39 / 0.05), 0 1px 2px rgb(17 24 39 / 0.03);
  --ds-shadow-2: 0 10px 15px -3px rgb(17 24 39 / 0.08), 0 4px 6px -2px rgb(17 24 39 / 0.04);
  --ds-shadow-3: 0 -4px 16px rgb(17 24 39 / 0.08);
  --ds-shadow-4: 0 20px 25px -5px rgb(17 24 39 / 0.14), 0 10px 10px -5px rgb(17 24 39 / 0.05);

  /* --- Dimensions interactives ----------------------------------------- */
  --ds-tap: 2.75rem;               /* 44px : cible tactile minimale */
  --ds-tap-lg: 3rem;               /* 48px : CTA mobile, champs */
  --ds-header-h: 3.5rem;           /* barre principale mobile */
  --ds-bottomnav-h: 4rem;
  --ds-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- Mouvement -------------------------------------------------------- */
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
  --ds-dur-fast: 120ms;
  --ds-dur: 200ms;
  --ds-dur-slow: 300ms;

  /* --- Empilement ------------------------------------------------------- */
  --ds-z-sticky: 30;
  --ds-z-bottomnav: 40;
  --ds-z-fab: 35;
  --ds-z-drawer: 60;
  --ds-z-toast: 70;
}

@media (min-width: 48em) { /* 768px */
  :root {
    --ds-gutter: 2rem;
    --ds-grid-gap: 1.25rem;
    --ds-header-h: 4rem;
  }
}

@media (min-width: 64em) { /* 1024px */
  :root {
    --ds-gutter: 2.5rem;
    --ds-grid-gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-fast: 0ms;
    --ds-dur: 0ms;
    --ds-dur-slow: 0ms;
  }
}