/*
 * Design system Fomba Fomba — toutes les valeurs de couleur, de typographie,
 * d'espacement, de rayon et d'ombre sont définies ici et nulle part ailleurs.
 */
:root {
  /* Couleurs de la charte — tirées du logo : rouge, vert, noir, blanc */
  --color-ink: #111111;          /* noir du logo */
  --color-ink-soft: #151312;     /* noir des sections sombres */
  --color-ivory: #F6F2EE;        /* blanc chaud (fonds alternés) */
  --color-sand: #EFE8E2;         /* gris sable très clair */
  --color-paper: #FCFBFA;        /* blanc du logo, à peine réchauffé */
  --color-brand: #B80C10;        /* rouge du logo — couleur d'action */
  --color-brand-light: #F6A9A5;  /* rouge clair : accents lisibles sur fond sombre */
  --color-brand-deep: #96090D;   /* rouge profond : icônes et filets sur fond clair */
  --color-green: #1E6410;        /* vert du logo — couleur secondaire */
  --color-green-deep: #123F0A;
  --color-green-light: #8FD27C;
  --color-bordeaux: #7A080B;

  /* Rôles */
  --color-bg: var(--color-paper);
  --color-surface: #ffffff;
  --color-text: #1A1614;
  --color-muted: #5F5753;
  --color-accent: #A30A0E;       /* texte d'accent sur fond clair (contraste AA) */
  --color-border: rgba(40, 30, 25, .14);
  --color-border-strong: rgba(40, 30, 25, .3);
  --color-on-dark: #FAF7F4;
  --color-on-dark-muted: rgba(250, 247, 244, .74);
  --color-border-dark: rgba(255, 255, 255, .18);
  --color-success: #1E6410;
  --color-danger: #8E1210;
  --gradient-brand: linear-gradient(135deg, #D2252B 0%, #B80C10 50%, #8E080B 100%);
  --gradient-brand-text: linear-gradient(135deg, #FFD3CF 0%, #F47C7C 100%); /* mots mis en valeur sur les photos */
  --gradient-green: linear-gradient(110deg, #0E3408 0%, #1E6410 60%, #2C7A1C 100%);

  /* Typographie */
  --font-display: "Playfair Display", "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(3.4rem, 8vw, 7.6rem);
  --fs-h1: clamp(2.6rem, 5.4vw, 5rem);
  --fs-h2: clamp(1.9rem, 3vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.15rem, 1.7vw, 1.6rem);
  --fs-body: clamp(1rem, 1.05vw, 1.08rem);
  --fs-small: .875rem;
  --fs-eyebrow: .72rem;
  --lh-tight: 1.04;
  --lh-title: 1.14;
  --lh-body: 1.65;
  --tracking-eyebrow: .32em;

  /* Espacements */
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.25rem;
  --space-2xl: 5rem;
  --space-section: clamp(3.75rem, 8vw, 7.5rem);
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --container: 1320px;
  --container-narrow: 780px;
  --header-h: 84px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-sm: 0 2px 10px rgba(30, 22, 18, .08);
  --shadow-md: 0 14px 36px -14px rgba(30, 22, 18, .28);
  --shadow-lg: 0 34px 70px -28px rgba(15, 10, 8, .55);
  --shadow-brand: 0 12px 30px -12px rgba(184, 12, 16, .55);

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;
}

@media (max-width: 768px) {
  :root { --header-h: 68px; }
}