/* ============================================
   VARIABLES.CSS — SECK PHOTOGRAPHIE
   Design system — Kit Luxe / Premium, variante A
   ============================================ */

:root {

  /* ---- Couleurs de marque ---- */
  --color-black: #141414;
  --color-black-soft: #1E1E1E;
  --color-gold: #B8964F;         /* accent — UNIQUEMENT sur fond sombre */
  --color-gold-light: #D4B876;   /* hover doré sur fond sombre */
  --color-gold-deep: #8C6D2F;    /* variante doré foncé — UNIQUEMENT sur fond clair, gros texte/icônes uniquement, jamais texte courant */
  --color-cream: #F4F1EA;
  --color-cream-soft: #FAF8F3;

  /*
    RÈGLE DE CONTRASTE (obligatoire, ne jamais déroger) :
    - Fond sombre (--color-black / --color-black-soft) → texte --color-cream ou --color-white
      (contraste ≈ 15:1 / 13:1). --color-gold autorisé en accent, gros texte, bordures, icônes.
    - Fond clair (--color-cream / --color-white) → texte --color-black uniquement pour le texte
      courant. --color-gold-deep autorisé UNIQUEMENT en gros texte (≥18px bold) ou icônes,
      jamais en paragraphe courant (contraste insuffisant).
    - --color-gold et --color-gold-light ne doivent JAMAIS servir de couleur de texte courant
      sur fond clair : contraste < 3:1, illisible. C'est l'erreur la plus fréquente à éviter.
  */

  --color-white: #FFFFFF;
  --color-text-dark: #1A1A1A;      /* texte sur fond clair */
  --color-text-light: #F4F1EA;     /* texte sur fond sombre */
  --color-text-muted-dark: #4A4A4A;  /* texte secondaire sur fond clair — contraste suffisant */
  --color-text-muted-light: #C9C4B8; /* texte secondaire sur fond sombre — contraste suffisant */

  --color-border-light: #E3DFD5;
  --color-border-dark: #33302A;

  /* ---- Typographie ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 5vw + 1rem, 4.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.15;
  --lh-normal: 1.6;

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

  /* ---- Radius (Kit Luxe = quasi nul) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Ombres ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 4px 20px rgba(184, 150, 79, 0.25);

  /* ---- Transitions ---- */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-padding: 1.25rem;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-overlay: 200;
}