/* ============================================================
   Libri & non solo — Design Foundations
   Colors + Typography tokens (base + semantic)
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts (see @import below).
   If you bundle offline, swap for local files in /fonts.
   ============================================================ */

/* Playfair Display (documented fallback) stays on CDN — no local file supplied. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Brand fonts — self-hosted from /fonts (variable TTFs). */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/BodoniModa-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/BodoniModa-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700; font-style: italic; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  --blu-primario:   #224886; /* testo, header, navbar, body headings */
  --blu-scuro:      #1E4892; /* footer, hover heading, dark surfaces */
  --arancio:        #E8612F; /* CTA, primary buttons, badges */
  --arancio-hover:  #F25B22; /* active / interaction state */

  /* ---------- NEUTRALS ---------- */
  --testo:          #211E21; /* body text (quasi nero) */
  --testo-2:        #6B7280; /* secondary text */
  --bg:             #FFFFFF; /* page background */
  --bg-alt:         #F5F5F5; /* alternating section background */
  --linea:          #E5E7EB; /* hairline borders */
  --linea-2:        #D1D5DB; /* stronger borders */

  /* ---------- SEMANTIC / UTILITY ---------- */
  --whatsapp:       #25D366; /* fixed WhatsApp button */
  --whatsapp-hover: #1FB957;
  --success:        #1F8A5B;
  --warning:        #C77700;
  --danger:         #C0392B;

  /* tinted brand surfaces (derived, harmonious) */
  --blu-tint:       #EEF2F9; /* pale blue wash for hero / cards */
  --arancio-tint:   #FCEEE7; /* pale orange wash for badges / banners */

  /* ---------- FOREGROUND ALIASES ---------- */
  --fg1: var(--testo);       /* primary text */
  --fg2: var(--testo-2);     /* secondary text */
  --fg-brand: var(--blu-primario);
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.72);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-display-alt: 'Playfair Display', 'Bodoni Moda', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (mobile-first, fluid) ---------- */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);   /* body */
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.5vw, 3.9rem);    /* hero */

  /* ---------- RADII ---------- */
  --r-sm: 8px;
  --r-md: 12px;   /* default card radius */
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm-neutral) ---------- */
  --shadow-sm: 0 1px 2px rgba(33,30,33,0.06), 0 1px 3px rgba(33,30,33,0.05);
  --shadow-md: 0 4px 12px rgba(34,72,134,0.08), 0 2px 4px rgba(33,30,33,0.05);
  --shadow-lg: 0 12px 32px rgba(34,72,134,0.12), 0 4px 8px rgba(33,30,33,0.06);
  --shadow-cta: 0 6px 18px rgba(232,97,47,0.28);

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

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Apply these classes (or copy the declarations) for consistency.
   ============================================================ */

.h1, h1 {
  font-family: var(--font-display);
  font-style: italic;       /* signature look — italic display serif */
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--blu-primario);
  text-wrap: balance;
}

.h2, h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--blu-primario);
  text-wrap: balance;
}

.h3, h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--blu-primario);
}

/* Subtitle / kicker — upright serif, lighter weight */
.subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--testo-2);
}

/* Eyebrow / overline — sans, uppercase, tracked */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--arancio);
}

.p, p, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--testo);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--testo-2);
}

.small {
  font-size: var(--step--1);
  color: var(--testo-2);
}

/* Nav / UI labels — sans, semibold */
.nav-label, .ui-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--blu-primario);
}

a { color: var(--blu-primario); text-decoration: none; }
a:hover { color: var(--arancio); }