/* ============================================================
   GaabIT — Brand tokens
   ------------------------------------------------------------
   Source unique de vérité pour toute l'identité visuelle.
   Importé par styles.css et par tous les supports (cartes de
   visite, LinkedIn, signature email, letterhead, chart
   graphique).

   Ne pas modifier sans mettre à jour le chart graphique
   (brand/brand.html) en parallèle.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  /* ========================================
     Couleurs de marque
     ======================================== */

  /* Accent unique — interactif (liens, CTA, hover, focus, borders "featured") */
  --brand-red:       #E70013;
  --brand-red-dark:  #FF1F3A; /* variante pour mode sombre, meilleure lisibilité sur ink */

  /* Neutres de base */
  --brand-ink:       #0A0A0A; /* titres, texte principal, fond mode sombre */
  --brand-ivory:     #FAF7F2; /* fond clair principal */

  /* Couleur "chaleur" — usage strict (cf. brand.html) :
     fond de section "humaine/culturelle" uniquement, max 1 section par page,
     jamais interactive. */
  --brand-sand:      #D9B382;

  /* Échelle de gris neutres — tout l'UI secondaire */
  --gray-50:         #F5F5F4;
  --gray-100:        #E7E5E4;
  --gray-200:        #DDD9D5;
  --gray-300:        #D6D3D1;
  --gray-400:        #A8A29E;
  --gray-500:        #78716C;
  --gray-600:        #57534E;
  --gray-700:        #44403C;
  --gray-800:        #292524;
  --gray-900:        #1C1917;

  /* ========================================
     Typographie
     ======================================== */

  --font-sans:  'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-arabic: 'Cairo', 'Geist', system-ui, sans-serif;

  /* Échelle de tailles — base 16px, ratio 1.25 (quarte majeure) */
  --text-xs:    0.75rem;   /* 12px — labels, mentions légales */
  --text-sm:    0.875rem;  /* 14px — body compact, meta */
  --text-base:  1rem;      /* 16px — body standard */
  --text-md:    1.125rem;  /* 18px — body large, lead */
  --text-lg:    1.25rem;   /* 20px — sous-titres */
  --text-xl:    1.5rem;    /* 24px — h4 */
  --text-2xl:   2rem;      /* 32px — h3 */
  --text-3xl:   2.5rem;    /* 40px — h2 section */
  --text-4xl:   3.25rem;   /* 52px — h1 page */
  --text-5xl:   4.5rem;    /* 72px — hero display */

  /* Line-heights */
  --leading-tight:   1.1;   /* titres display */
  --leading-snug:    1.25;  /* titres h1-h3 */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.7;   /* paragraphes longs */

  /* Letter-spacing — serré sur les gros titres Geist */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.1em;  /* labels UPPERCASE mono */

  /* Graisses */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ========================================
     Spacing — échelle 4px base
     ======================================== */

  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ========================================
     Radius
     ======================================== */

  --radius-sm:   6px;   /* tags, pills, chips */
  --radius-md:   12px;  /* inputs, petits boutons */
  --radius-lg:   16px;  /* cards standard */
  --radius-xl:   20px;  /* cards featured, sections */
  --radius-2xl:  24px;  /* containers larges */
  --radius-full: 9999px; /* boutons pill */

  /* ========================================
     Shadows — discrètes, style premium
     ======================================== */

  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 2px 4px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.10);
  --shadow-xl: 0 24px 56px rgba(10, 10, 10, 0.14);

  /* Shadow rouge — pour focus ring des CTA */
  --shadow-focus-red: 0 0 0 3px rgba(231, 0, 19, 0.25);

  /* ========================================
     Motion
     ======================================== */

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     Layout
     ======================================== */

  --container-max:   1200px;
  --container-narrow: 880px;
  --container-wide:   1440px;
  --gutter:          clamp(1rem, 4vw, 2.5rem);
}

/* ============================================================
   Reset minimal aligné sur la marque
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--brand-ink);
  background: var(--brand-ivory);
}

html[lang="ar"] body {
  font-family: var(--font-arabic);
}

/* Titres par défaut — override facile via classes spécifiques */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

/* Code et accents techniques en mono */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Sélection : fond rouge TN */
::selection {
  background: var(--brand-red);
  color: var(--brand-ivory);
}