/* ================================================================
   MacaSport Village — Variables CSS
   Light theme · White background dominant
   ================================================================ */

:root {

  /* ── 1. Typographie ─────────────────────────────────────────── */
  --f-display:    'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-body:       'Barlow', system-ui, sans-serif;

  /* ── 2. Fond & Surfaces ─────────────────────────────────────── */
  --c-bg:         #FFFFFF;       /* fond page principal — blanc pur */
  --c-surface:    #F5F5F0;       /* sections alternées — blanc cassé */
  --c-surface-2:  #EEEEE8;       /* cards, inputs, zones légèrement marquées */

  /* ── 3. Textes ──────────────────────────────────────────────── */
  --c-text:       #111111;       /* texte principal */
  --c-muted:      #555555;       /* texte secondaire, descriptions */
  --c-dim:        #999999;       /* labels, placeholders, mentions légales */

  /* ── 4. Vert MacaSport (palette principale) ─────────────────── */
  --c-accent:          #1DB954;              /* CTA, highlights, underlines */
  --c-accent-dark:     #0A8C3A;              /* hover CTA, états actifs */
  --c-accent-dim:      rgba(29,185,84,0.10); /* backgrounds légers, badges */
  --c-green-dark:      #0A2E1A;              /* navbar, footer, titres foncés */
  --c-green-mid:       #155C30;              /* hover navbar, bordures fortes */
  --c-green-light:     #E8F5ED;              /* fond sections vertes claires */

  /* ── 5. Bleu Pulse Padel (section padel uniquement) ─────────── */
  --c-blue-dark:       #0A1F3A;  /* fond hero padel */
  --c-blue-accent:     #1A6FD4;  /* CTA padel */
  --c-blue-mid:        #1550A0;  /* hover boutons padel */
  --c-blue-light:      #E8F0FB;  /* backgrounds padel légers */

  /* ── 6. Bordures ────────────────────────────────────────────── */
  --c-border:     rgba(10, 46, 26, 0.10);   /* bordure légère standard */
  --c-border-2:   rgba(10, 46, 26, 0.22);   /* bordure visible, emphasis */

  /* ── 7. Layout ──────────────────────────────────────────────── */
  --nav-h:        72px;
  --bot-bar-h:    46px;
  --max-w:        1280px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --section-py:   clamp(4rem, 8vw, 7rem);

  /* ── 8. Border Radius ───────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-pill:  999px;
  --radius-cards: 12px;
  --radius-inputs:   var(--radius-pill);
  --radius-buttons:  var(--radius-pill);

  /* ── 9. Animations & Easing ─────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:          0.55s;
  --dur-fast:     0.22s;
  --dur-slow:     0.85s;

  /* ── 10. Aliases long-form (utilisés par style.css global) ───── */
  --font-display:          var(--f-display);
  --font-body:             var(--f-body);
  --color-white:           #FFFFFF;
  --color-black:           #0A0A0A;
  --color-bg:              var(--c-bg);
  --color-bg-alt:          var(--c-surface);
  --color-green-dark:      var(--c-green-dark);
  --color-green-mid:       var(--c-green-mid);
  --color-green-accent:    var(--c-accent);
  --color-green-light:     var(--c-green-light);
  --color-blue-dark:       var(--c-blue-dark);
  --color-blue-accent:     var(--c-blue-accent);
  --color-blue-light:      var(--c-blue-light);
  --color-text-primary:    var(--c-text);
  --color-text-secondary:  var(--c-muted);
  --color-text-muted:      var(--c-dim);
  --color-border:          var(--c-border);
  --color-border-strong:   var(--c-border-2);
  --section-padding:       var(--section-py) 0;
  --container-max:         var(--max-w);
  --container-padding:     0 var(--gutter);
  --transition-fast:       var(--dur-fast) var(--ease-out);
  --transition-mid:        var(--dur) var(--ease-out);
  --transition-slow:       var(--dur-slow) var(--ease-out);
}