/* ============================================================
   variables.css — Charte graphique MyGolfSchool
   Toutes les variables sont ici. Modifier ce fichier pour
   personnaliser l'intégralité du site.
   ============================================================ */

:root {

  /* ============================================================
     COULEURS PRINCIPALES
     ============================================================ */

  --green-deep:    #428555;
  --green-mid:     #4d9e65;
  --green-main:    #62c370;
  --green-light:   #a0d9a8;
  --green-pale:    #e2f5e4;
  --green-xpale:   #f2f8f3;

  /* ============================================================
     INTERFACE GÉNÉRALE
     ============================================================ */

  --bg-page:       #f3f2ee;
  --bg-card:       #ffffff;
  --bg-input:      #f5f5f3;
  --bg-subtle:     #f3f2ee;

  --text:          #1e2420;
  --text-muted:    #6b7268;
  --text-light:    #9aa89a;
  --text-white:    #ffffff;

  --border:        #dde3da;
  --border-light:  #eceee9;
  --border-strong: #c4d0be;

  /* ============================================================
     SIDEBAR
     ============================================================ */

  --sidebar-w:           220px;
  --sidebar-bg:          #428555;
  --sidebar-border:      rgba(255,255,255,0.08);
  --sidebar-item:        rgba(255,255,255,0.55);
  --sidebar-item-hover:  rgba(255,255,255,0.07);
  --sidebar-active:      #e2f5e4;
  --sidebar-active-bg:   rgba(226,245,228,0.18);
  --sidebar-section:     rgba(255,255,255,0.22);
  --gear-bg:             rgba(168,200,232,0.10);
  --gear-color:          #a8c8e8;
  --gear-border:         rgba(168,200,232,0.20);

  /* ============================================================
     TOPBAR & SUBNAV
     ============================================================ */

  --topbar-h:            56px;
  --topbar-bg:           #ffffff;
  --topbar-border:       var(--border);

  --subnav-h:            44px;
  --subnav-bg:           #ffffff;
  --subnav-border:       var(--border);
  --subnav-text:         var(--text-muted);
  --subnav-active:       var(--green-main);
  --subnav-active-bg:    var(--green-xpale);
  --subnav-indicator:    var(--green-main);

  /* ============================================================
     ADMIN — Thème bleu ardoise (inchangé)
     ============================================================ */

  --admin-sidebar-bg:        #2a3f5c;
  --admin-sidebar-item:      rgba(255,255,255,0.5);
  --admin-sidebar-active:    #a8c8e8;
  --admin-sidebar-active-bg: rgba(168,200,232,0.15);
  --admin-sidebar-border:    rgba(255,255,255,0.09);
  --admin-sidebar-section:   rgba(255,255,255,0.25);
  --admin-topbar-bg:         #f0f4f8;
  --admin-topbar-border:     #c8d8e8;
  --admin-subnav-bg:         #f0f4f8;
  --admin-subnav-border:     #c8d8e8;
  --admin-subnav-active:     #3a6fa8;
  --admin-subnav-active-bg:  #e0ecf8;
  --admin-subnav-indicator:  #3a6fa8;
  --admin-accent:            #3a6fa8;

  /* ============================================================
     CARDS
     ============================================================ */

  --card-bg:         var(--bg-card);
  --card-border:     var(--border);
  --card-radius:     14px;
  --card-shadow:     0 1px 4px rgba(0,0,0,0.07);
  --card-padding:    24px;
  --card-padding-sm: 16px;

  /* ============================================================
     BOUTONS
     ============================================================ */

  --btn-radius:   9px;
  --btn-h:        40px;
  --btn-h-sm:     32px;
  --btn-h-lg:     48px;
  --btn-px:       18px;
  --btn-px-sm:    12px;
  --btn-px-lg:    24px;
  --btn-font:     13px;
  --btn-font-sm:  12px;
  --btn-font-lg:  15px;
  --btn-weight:   600;

  --btn-primary-bg:       var(--green-main);
  --btn-primary-text:     #1a3d22;
  --btn-primary-hover:    var(--green-mid);

  --btn-secondary-bg:     #ffffff;
  --btn-secondary-text:   var(--text);
  --btn-secondary-border: var(--border);
  --btn-secondary-hover:  var(--bg-subtle);

  --btn-danger-bg:        #fef2f2;
  --btn-danger-text:      #dc2626;
  --btn-danger-border:    #fecaca;
  --btn-danger-hover:     #fee2e2;

  --btn-warning-bg:       #fffbeb;
  --btn-warning-text:     #d97706;
  --btn-warning-border:   #fde68a;
  --btn-warning-hover:    #fef3c7;

  --btn-dark-bg:          #1e2535;
  --btn-dark-text:        #ffffff;
  --btn-dark-hover:       #2d3748;

  --btn-ghost-bg:         transparent;
  --btn-ghost-text:       var(--text-muted);
  --btn-ghost-border:     var(--border);
  --btn-ghost-hover:      var(--bg-subtle);

  /* ============================================================
     FORMULAIRES
     ============================================================ */

  --input-bg:      var(--bg-input);
  --input-border:  var(--border);
  --input-radius:  8px;
  --input-h:       40px;
  --input-focus:   var(--green-main);
  --input-font:    14px;
  --label-font:    13px;
  --label-weight:  600;
  --label-color:   var(--text-muted);
  --form-gap:      16px;

  /* ============================================================
     TABLEAUX
     ============================================================ */

  --table-th-font:   11px;
  --table-th-color:  var(--text-muted);
  --table-th-border: var(--border);
  --table-td-font:   13px;
  --table-td-border: var(--border-light);
  --table-row-hover: var(--green-xpale);
  --table-padding-x: 14px;
  --table-padding-y: 11px;

  /* ============================================================
     BADGES
     ============================================================ */

  --badge-radius:  20px;
  --badge-padding: 3px 10px;
  --badge-font:    12px;
  --badge-weight:  600;

  --badge-success-bg:     #f0fdf4;
  --badge-success-text:   #166534;
  --badge-error-bg:       #fef2f2;
  --badge-error-text:     #dc2626;
  --badge-warning-bg:     #fffbeb;
  --badge-warning-text:   #d97706;
  --badge-neutral-bg:     var(--bg-subtle);
  --badge-neutral-text:   var(--text-muted);
  --badge-neutral-border: var(--border);

  /* ============================================================
     ALERTES
     ============================================================ */

  --alert-radius:  10px;
  --alert-padding: 12px 16px;
  --alert-font:    13px;

  --alert-success-bg:     #f0fdf4;
  --alert-success-border: #bbf7d0;
  --alert-success-text:   #166534;
  --alert-error-bg:       #fef2f2;
  --alert-error-border:   #fecaca;
  --alert-error-text:     #991b1b;
  --alert-warning-bg:     #fffbeb;
  --alert-warning-border: #fde68a;
  --alert-warning-text:   #92400e;
  --alert-info-bg:        #eff6ff;
  --alert-info-border:    #bfdbfe;
  --alert-info-text:      #1e40af;

  /* ============================================================
     MODALS
     ============================================================ */

  --modal-bg:      #ffffff;
  --modal-radius:  16px;
  --modal-padding: 28px;
  --modal-shadow:  0 24px 64px rgba(0,0,0,0.18);
  --modal-overlay: rgba(0,0,0,0.4);
  --modal-max-w:   480px;

  /* ============================================================
     INFOBULLE
     ============================================================ */

  --tooltip-bg:      #1a3d22;
  --tooltip-color:   #ffffff;
  --tooltip-radius:  8px;
  --tooltip-padding: 8px 12px;
  --tooltip-font:    12px;
  --tooltip-width:   220px;
  --tooltip-shadow:  0 4px 16px rgba(0,0,0,0.2);

  /* ============================================================
     LIST-CARDS
     ============================================================ */

  --list-card-radius:  12px;
  --list-card-padding: 16px 20px;
  --list-card-gap:     10px;
  --list-card-accent:  4px;

  /* ============================================================
     FICHE (header avatar + nom)
     ============================================================ */

  --avatar-size:     56px;
  --avatar-radius:   50%;
  --avatar-bg:       var(--green-pale);
  --avatar-color:    var(--green-main);
  --avatar-font:     20px;
  --avatar-sm-size:  34px;
  --avatar-sm-font:  12px;

  /* ============================================================
     STATS ROW
     ============================================================ */

  --stat-padding:    16px;
  --stat-value-font: 28px;
  --stat-label-font: 12px;

  /* ============================================================
     COULEURS TYPES COMPÉTITION
     ============================================================ */

  --c-trophee:   #E8523A;
  --c-verger:    #62c370;
  --c-copines:   #D44B8A;
  --c-interclub: #5A6B8A;
  --c-fete:      #E8923A;
  --c-autre:     #7C3AED;

  /* ============================================================
     TYPOGRAPHIE
     ============================================================ */

  --font-main:  'DM Sans', sans-serif;
  --font-title: 'Nunito', sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;

  /* ============================================================
     ESPACEMENTS
     ============================================================ */

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition: 0.15s ease;

  /* ============================================================
     BADGES ÉLÈVE (catégorie, index, drapeau)
     ============================================================ */

  /* Catégorie française — gris foncé */
  --badge-cat-fr-bg:      #e2e4df;
  --badge-cat-fr-text:    #3a3d37;
  --badge-cat-fr-border:  #c4c8bf;

  /* Catégorie internationale — gris clair */
  --badge-cat-intl-bg:    #f0f1ee;
  --badge-cat-intl-text:  #6b7268;
  --badge-cat-intl-border: #dde3da;

  /* Index — bleu ardoise */
  --badge-index-bg:       #e8f0fe;
  --badge-index-text:     #1a56a0;
  --badge-index-border:   #93b4e8;

  /* Drapeaux FFGolf — couleurs gérées en BDD (edg_drapeaux.couleur) */
}