/* ==========================================================================
   VARIABLES.CSS — Design Tokens
   Consul-Ting / Amani Khalifa — Performance Marketing Consulting
   Modifier ce fichier pour changer l'identité visuelle globale du site
   (couleurs, typographies, espacements) sans toucher au reste du code.
   ========================================================================== */

:root {
  /* ---- Brand (facile à remplacer lors du changement de marque) ---- */
  --brand-name: "Consul-Ting";

  /* ---- Couleurs principales ---- */
  --color-ink: #111827;          /* Texte principal / fond sombre */
  --color-ink-soft: #1f2937;     /* Variante plus douce de l'encre */
  --color-trust-blue: #1D4ED8;   /* Bleu confiance — CTA, liens, accents */
  --color-trust-blue-dark: #1740b3;
  --color-accent: #14B8A6;       /* Accent moderne — teal, data/IA */
  --color-accent-dark: #0f9488;
  --color-bg: #FFFFFF;           /* Fond principal */
  --color-bg-alt: #F7F8FA;       /* Fond alterné / sections */
  --color-bg-dark: #0B1120;      /* Fond sombre (footer, sections premium) */
  --color-border: #E5E7EB;
  --color-text-muted: #4B5563;
  --color-text-faint: #6B7280;
  --color-white: #FFFFFF;

  /* ---- Dégradé signature (ligne de croissance / data) ---- */
  --gradient-growth: linear-gradient(90deg, var(--color-trust-blue) 0%, var(--color-accent) 100%);

  /* ---- Typographies ---- */
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Échelle typographique ---- */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* ---- Espacements ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 800px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ---- Ombres ---- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 40px rgba(17, 24, 39, 0.12);

  /* ---- Transitions ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition-base: 0.3s var(--ease-standard);
  --transition-slow: 0.6s var(--ease-standard);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}