/* ============================================================
   SPA Strasbourg — Design Tokens v2 (palette cyan)
   Chargé en premier par functions.php — définit toutes les variables.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root {
  /* ── Couleurs marque ─────────────────────────────────────── */
  --color-primary:       #52bfdc;   /* cyan — header, nav, tags */
  --color-primary-dark:  #435664;   /* hover primaire / fond header */
  --color-primary-deeper:#1a7a96;   /* état actif / focus */
  --color-secondary:     #1a4a58;   /* cyan très foncé — footer, texte sur clair */
  --color-tag:           #2a9dbf;   /* mid-cyan — badges espèces / statut */

  /* ── Accent orange — CTA Adopter ────────────────────────── */
  --color-accent:        #c9844a;
  --color-accent-dark:   #b5703a;
  --color-accent-light:  #f0d5b8;

  /* ── Fonds neutres ───────────────────────────────────────── */
  --color-bg:            #f3f3f3;   /* fond gris page */
  --color-surface:       #ffffff;   /* cards, formulaires */
  --color-border:        #e0e0e0;
  --color-border-strong: #c8c8c8;

  /* ── Texte ───────────────────────────────────────────────── */
  --color-text:          #1a1a18;
  --color-text-muted:    #6c757d;
  --color-text-light:    #9ca3af;
  --color-text-inverse:  #ffffff;

  /* ── Sémantique ──────────────────────────────────────────── */
  --color-success:       #2a9dbf;
  --color-warning:       #c9844a;
  --color-danger:        #a63d2f;

  /* ── Footer ──────────────────────────────────────────────── */
  --color-footer-bg:     #1a1a2e;
  --color-footer-text:   rgba(255,255,255,0.65);
  --color-footer-title:  rgba(255,255,255,0.38);
  --color-footer-link:   rgba(255,255,255,0.65);

  /* ── Typographie ─────────────────────────────────────────── */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* ── Espacement (base 8px) ───────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --section-py:    80px;
  --section-py-sm: 48px;

  /* ── Rayons ──────────────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   10px;
  --radius-full: 9999px;

  /* ── Ombres (teinte cyan) ────────────────────────────────── */
  --shadow-sm:     0 1px 4px  rgba(26, 74, 88, 0.08);
  --shadow-md:     0 2px 12px rgba(26, 74, 88, 0.10);
  --shadow-lg:     0 6px 24px rgba(26, 74, 88, 0.18);
  --shadow-header: 0 2px 8px  rgba(26, 74, 88, 0.15);
  --shadow-focus:  0 0 0 3px  rgba(82, 191, 220, 0.35);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  --max-content: 1200px;
}

/* ── Styles sémantiques de base ─────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
}

p {
  font-family: var(--font-body);
  line-height: var(--leading-loose);
}