/* ============================================================
   MAIRIE DE FÉNIERS — DESIGN SYSTEM
   Modifiez ce fichier pour adapter toute la charte graphique
   ============================================================ */

:root {

  /* ── Couleurs principales ── */
  --primary:        #2E5B3C;   /* Vert forêt creusoise */
  --primary-dark:   #1e3d28;   /* Vert foncé (hover, footer) */
  --primary-light:  #e8f0eb;   /* Vert très clair (fonds, tags) */
  --secondary:      #C8912A;   /* Ocre/doré (accents, liens actifs) */
  --secondary-dark: #a07020;
  --secondary-light:#fdf3e0;

  /* ── Neutres ── */
  --white:          #ffffff;
  --bg:             #ffffff;
  --bg-alt:         #f7f6f3;   /* Fond légèrement chaud */
  --bg-dark:        #1a1a18;   /* Footer */
  --border:         #ddd9d0;
  --border-light:   #eeeae3;

  /* ── Textes ── */
  --text:           #1c1c1a;
  --text-muted:     #6b6b68;
  --text-light:     #9a9a96;
  --text-on-primary:#ffffff;
  --text-on-secondary:#ffffff;

  /* ── Typographie ── */
  --font-heading:   'Playfair Display', 'Georgia', serif;
  --font-body:      'Source Sans 3', 'Segoe UI', sans-serif;
  --font-ui:        'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* ── Tailles de police ── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */

  /* ── Espacements ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Layout ── */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --container-padding: 1.5rem;

  /* ── Bordures ── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow:     0 4px 12px rgba(0,0,0,0.10);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.14);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Header ── */
  --header-height:        72px;
  --header-height-scroll: 60px;
}

/* ── Mode sombre (facultatif, pour accèssibilité future) ── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Conserver les couleurs institutionnelles en dark mode */
    --bg:         #1a1a18;
    --bg-alt:     #242421;
    --text:       #f0ede6;
    --text-muted: #9a9a96;
    --border:     #333330;
  }
}