/* ==========================================================================
   Eliplast — design tokens
   Colori, tipografia, spaziature. Modificare qui, non nei singoli componenti.
   ========================================================================== */

/* Font self-hosted (licenza SIL OFL, vedi assets/fonts/OFL-*.txt) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colori ---------------------------------------------------------- */
  /* Dal logo: usare azzurro e giallo come superfici/accenti, NON come colore
     del testo su bianco (contrasto insufficiente). */
  --c-blue: #4aa5d4;        /* azzurro logo */
  --c-blue-light: #60bee2;  /* azzurro chiaro logo */
  --c-yellow: #fae01a;      /* giallo logo, solo accento */

  --c-navy: #0f2a3d;        /* blu scuro: titoli, footer, fasce scure */
  --c-navy-2: #16384f;      /* variante per superfici su fondo scuro */
  --c-ink: #2b3440;         /* antracite: testo corrente */
  --c-muted: #56616d;       /* testo secondario (AA su bianco e grigio chiaro) */
  --c-blue-dark: #1b6a94;   /* link e testo azzurro (AA su bianco) */

  --c-white: #ffffff;
  --c-grey-50: #f4f6f8;     /* sfondi di sezione */
  --c-grey-100: #e9edf1;
  --c-grey-200: #dde3e8;    /* linee, bordi */
  --c-grey-400: #9aa6b2;

  --c-error: #b3261e;
  --c-success: #1e6b3a;

  /* --- Tipografia ------------------------------------------------------ */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Barlow", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-100: 0.875rem;  /* 14 */
  --fs-200: 1rem;      /* 16 */
  --fs-300: 1.125rem;  /* 18 */
  --fs-400: 1.375rem;  /* 22 */
  --fs-500: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);   /* h3 grandi / h2 piccoli */
  --fs-600: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);  /* h2 */
  --fs-700: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);   /* h1 */

  --lh-tight: 1.15;
  --lh-base: 1.6;

  /* --- Spaziature (scala 4px) ------------------------------------------ */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */

  --section-y: clamp(3rem, 2rem + 4vw, 6rem);

  /* --- Layout ---------------------------------------------------------- */
  --container: 75rem;       /* 1200px */
  --container-narrow: 48rem;
  --gutter: 1rem;           /* 16px su mobile */
  --header-h: 4.5rem;

  /* --- Forme ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --border: 1px solid var(--c-grey-200);
  --shadow: 0 1px 2px rgba(15, 42, 61, 0.06), 0 4px 16px rgba(15, 42, 61, 0.06);

  --focus: 3px solid var(--c-blue-dark);
  --transition: 150ms ease;
}

@media (min-width: 48em) {
  :root {
    --gutter: 1.5rem;
    --header-h: 5.25rem;
  }
}