/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM — ComuniCare
   Palette, tipografia, spacing, radius e glass estratti da
   resources/mario-stella-preventivo.html.
   Le sole variabili sovrascritte dal Customizer sono
   --blue, --blue-dark, --text e --radius-md.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── COLORI — superfici chiare ── */
  --bg:            #ffffff;
  --bg-2:          #f5f7fa;
  --bg-3:          #eef2f8;
  --bg-4:          #dce8fa;

  /* ── COLORI — superfici scure ── */
  --ink-900:       #071020;
  --ink-800:       #0a1628;
  --ink-700:       #0d2b52;

  /* ── COLORI — accento ── */
  --blue:          #0071e3;
  --blue-mid:      #0062c4;
  --blue-dark:     #0051a8;
  --blue-light:    #e8f0fb;
  --blue-soft:     #42a5f5;
  --blue-bright:   #7cc4ff;

  /* ── COLORI — testo ── */
  --text:          #1d1d1f;
  --muted:         #6e6e73;
  --muted-2:       #86868b;
  --on-dark:       rgba(255, 255, 255, 0.92);
  --on-dark-mute:  rgba(255, 255, 255, 0.64);
  --on-dark-faint: rgba(255, 255, 255, 0.44);

  /* ── COLORI — stato ── */
  --ok:            #25d366;
  --err:           #ff7b7b;

  /* ── LINEE ── */
  --border:        #e8e8ed;
  --border-soft:   rgba(0, 0, 0, 0.06);
  --border-dark:   rgba(255, 255, 255, 0.12);

  /* ── TIPOGRAFIA ──
     Inter, come nel riferimento. Scala fluida con gerarchia netta. */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:    clamp(36px, 7.2vw, 88px);
  --fs-h1:         clamp(30px, 5.4vw, 64px);
  --fs-h2:         clamp(26px, 4vw, 48px);
  --fs-h3:         clamp(20px, 2.4vw, 28px);
  --fs-h4:         clamp(17px, 1.7vw, 20px);
  --fs-body-lg:    clamp(16px, 1.4vw, 19px);
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    13px;
  --fs-label:      12px;

  --lh-tight:      1.02;
  --lh-snug:       1.14;
  --lh-normal:     1.6;
  --lh-relaxed:    1.75;

  --tracking-display: -0.045em;
  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-label:   0.12em;

  /* ── SPACING — scala a step fissi ── */
  --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:       80px;
  --space-10:      96px;
  --space-11:      128px;

  /* spaziature fluide derivate */
  --pad-x:         clamp(20px, 5vw, 80px);
  --pad-y:         clamp(64px, 9vw, 128px);
  --gap-sm:        clamp(10px, 1.6vw, 16px);
  --gap-md:        clamp(16px, 2.4vw, 24px);
  --gap-lg:        clamp(28px, 4vw, 48px);

  /* ── LAYOUT ── */
  --maxw:          1560px;
  --maxw-text:     1180px;
  --maxw-narrow:   860px;
  --nav-h:         68px;

  /* ── RADIUS — quattro livelli ── */
  --radius-sm:     10px;
  --radius-md:     18px;
  --radius-lg:     28px;
  --radius-pill:   999px;
  /* alias retrocompatibile: è la variabile pilotata dal Customizer */
  --radius:        var(--radius-md);

  /* ── GLASS SYSTEM ──
     Tre livelli soltanto, usati per creare gerarchia: non va
     applicato a ogni superficie. */
  --glass-1:       rgba(255, 255, 255, 0.55);   /* card di contenuto */
  --glass-2:       rgba(255, 255, 255, 0.72);   /* elementi in rilievo */
  --glass-3:       rgba(255, 255, 255, 0.86);   /* barre fisse */
  --glass-line:    rgba(255, 255, 255, 0.75);
  --glass-dark-1:  rgba(255, 255, 255, 0.07);
  --glass-dark-2:  rgba(255, 255, 255, 0.13);
  --glass-dark-line: rgba(255, 255, 255, 0.16);

  --blur-sm:       blur(10px) saturate(150%);
  --blur-md:       blur(20px) saturate(170%);
  --blur-lg:       blur(28px) saturate(180%);

  --shadow-sm:     0 4px 16px rgba(0, 81, 168, 0.06);
  --shadow-md:     0 8px 32px rgba(0, 81, 168, 0.09);
  --shadow-lg:     0 24px 60px rgba(0, 81, 168, 0.18);
  --shadow-xl:     0 40px 100px rgba(7, 16, 32, 0.28);

  /* ── GRADIENTI ── */
  --grad-accent:   linear-gradient(120deg, #0071e3 0%, #0051a8 48%, #0a7ae8 100%);
  --grad-light:    linear-gradient(150deg, #ffffff 0%, #eef3fb 45%, #dce8fa 100%);
  --grad-deep:     linear-gradient(150deg, #0a1628 0%, #0d2b52 55%, #071020 100%);

  /* ── MOTION ──
     150–300ms per le micro-interazioni, fino a 600ms per i reveal. */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      0.15s;
  --dur:           0.25s;
  --dur-slow:      0.45s;
  --dur-reveal:    0.7s;

  /* ── LIVELLI ── */
  --z-menu:        1100;   /* pannello del menu mobile */
  --z-nav:         1200;   /* barra dell'header: resta sopra il pannello */
  --z-modal:       2000;

  /* ── FOCUS ── */
  --focus:         var(--blue);
  --focus-on-dark: var(--blue-bright);
}