/* ==========================================================================
   CORO LA VALLE — Design System Variables
   Palette configurabile. Modifica qui per cambiare l'aspetto di tutto il sito.
   ========================================================================== */

:root {
  /* === PALETTE — MODIFICABILE ===
     Azzurro #95C9E8 estratto dal logo e dai costumi storici del coro.
     Palette sobria: azzurro + neutri caldi. L'oro tenue è accento minimale. */
  --color-primary: #95C9E8;        /* azzurro costumi (colore identitario) */
  --color-primary-dark: #5BA4D1;   /* hover, link, accenti forti */
  --color-primary-soft: #D6EBF7;   /* sfondi delicati, chips, hover menu */
  --color-bg: #FAF7F2;             /* avorio caldo (sfondo principale) */
  --color-surface: #FFFFFF;        /* card, header, footer */
  --color-text: #2C3E50;           /* testo principale (grigio scuro leggibile) */
  --color-text-muted: #6B7C8C;     /* metadata, didascalie, breadcrumb */
  --color-accent: #C9A961;         /* oro tenue, SOLO accenti minimali */
  --color-border: #E5DDD0;         /* separatori tiepidi */

  /* === TIPOGRAFIA ===
     Serif elegante per i titoli, sans-serif moderno per il corpo.
     "Stile antico ma non troppo": Cormorant richiama la tradizione corale
     senza essere pomposo, Source Sans 3 è contemporaneo e leggibile. */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Scale tipografica (modulare, ratio 1.25) */
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.563rem;
  --fs-xl:   1.953rem;
  --fs-2xl:  2.441rem;
  --fs-3xl:  3.052rem;
  --fs-hero: clamp(2.5rem, 5vw, 4.5rem);

  /* === LAYOUT === */
  --max-width: 1200px;
  --content-width: 760px;          /* testo lungo, massima leggibilità */
  --radius: 4px;
  --radius-lg: 8px;

  /* === OMBRE (sottili, "non esagerare") === */
  --shadow-sm: 0 1px 2px rgba(44, 62, 80, 0.06);
  --shadow-md: 0 2px 8px rgba(44, 62, 80, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 62, 80, 0.10);

  /* === SPACING (scala 4px) === */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;

  /* === TRANSIZIONI === */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
}