/* ================================================================
   brand.css — Source de vérité Kabaun AI
   ================================================================
   Modifiez ce fichier pour propager les changements à toutes les
   pages du dossier Marketing.

   Usage (sous-dossiers) : <link rel="stylesheet" href="../BrandGuidelines/brand.css">
   Usage (racine)        : <link rel="stylesheet" href="BrandGuidelines/brand.css">
   ================================================================ */


/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');


/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {

  /* ── Teal — couleur principale ─────────────────────────────── */
  --teal-50:  #e8f7f5;
  --teal-100: #c4ebe6;
  --teal-200: #9ad0c9;
  --teal-300: #6ab8af;
  --teal-400: #3a9f95;
  --teal-500: #1d7a72;
  --teal-600: #0d4f4a;
  --teal-700: #071f1c;

  /* Aliases courts (pages dark) */
  --teal:      var(--teal-200);   /* accent principal */
  --teal-dark: var(--teal-700);   /* fond dark */
  --teal-mid:  #0d3832;           /* intermédiaire 600 ↔ 700 */
  --muted:     #4a7a6e;           /* texte secondaire sur fond dark */
  --text:      #e2ede9;           /* texte principal sur fond dark */

  /* ── Amber — CTA & highlights ─────────────────────────────── */
  --amber:   #f0c040;
  --amber-d: #b88a1a;
  --amber-l: #fef9e6;

  /* ── Slate — neutres chauds ───────────────────────────────── */
  --slate-50:  #f4f7f6;
  --slate-100: #e8eded;
  --slate-200: #c8d4d2;
  --slate-400: #7a9996;
  --slate-600: #3d5c59;
  --slate-800: #162523;
  --white:     #ffffff;
  --black:     #050f0e;

  /* ── Gris système (pages light / Website) ─────────────────── */
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-700: #334155;
  --gray-900: #0f172a;

  /* ── Aliases --brand-* (Product Screen) ──────────────────── */
  --brand-teal-200: var(--teal-200);
  --brand-teal-400: var(--teal-400);
  --brand-teal-500: var(--teal-500);
  --brand-teal-600: var(--teal-600);
  --brand-teal-700: var(--teal-700);
  --brand-slate-50:  var(--slate-50);
  --brand-slate-200: var(--slate-200);
  --brand-slate-600: var(--slate-600);
  --brand-slate-800: var(--slate-800);
  --brand-white:     var(--white);

  /* ── Typographie ──────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Échelle typographique responsive */
  --t-xs:   clamp(11px, 0.85vw, 13px);
  --t-sm:   clamp(12px, 0.95vw, 14px);
  --t-base: clamp(14px, 1.05vw, 16px);
  --t-md:   clamp(16px, 1.35vw, 19px);
  --t-lg:   clamp(20px, 1.7vw,  24px);
  --t-xl:   clamp(28px, 2.6vw,  38px);
  --t-2xl:  clamp(36px, 3.5vw,  52px);
  --t-3xl:  clamp(44px, 4.5vw,  68px);

  /* ── Espacements ──────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ── Rayons ───────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Aliases --radius-* */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* ── Layout ───────────────────────────────────────────────── */
  --container:  1180px;
  --nav-h:      64px;     /* nav site vitrine */
  --section-py: clamp(64px, 8vw, 112px);
  --km-nav-h:   40px;     /* barre Marketing Hub (nav.js) */

  /* ── Fond texturé ────────────────────────────────────────────── */
  --texture-grid-size: 40px;
  --texture-grid-opacity: 0.07;
  --texture-dot-opacity: 0.15;
}


/* ── Fond texturé — classe utilitaire ──────────────────────────── */
/* Grille + points aux intersections. Transparence legere.
   Usage : class="bg-textured" sur fond dark ou light.
   Variante dark : class="bg-textured" (defaut, couleur teal)
   Variante light : class="bg-textured bg-textured-light"          */
.bg-textured {
  position: relative;
}
/* Couche 1 : lignes de grille */
.bg-textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(154,208,201,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,208,201,0.5) 1px, transparent 1px);
  background-size: var(--texture-grid-size) var(--texture-grid-size);
  opacity: var(--texture-grid-opacity);
  pointer-events: none;
  z-index: 0;
}
/* Couche 2 : points aux intersections */
.bg-textured::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(154,208,201,0.7) 1.2px, transparent 1.2px);
  background-size: var(--texture-grid-size) var(--texture-grid-size);
  opacity: var(--texture-dot-opacity);
  pointer-events: none;
  z-index: 0;
}
/* Variante light (fond clair) */
.bg-textured.bg-textured-light::before {
  background-image:
    linear-gradient(rgba(7,31,28,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,31,28,0.08) 1px, transparent 1px);
  opacity: 0.4;
}
.bg-textured.bg-textured-light::after {
  background-image:
    radial-gradient(circle, rgba(7,31,28,0.15) 1.2px, transparent 1.2px);
  opacity: 0.5;
}
/* Enfants au-dessus des couches texture */
.bg-textured > * {
  position: relative;
  z-index: 1;
}