/* =========================================================
   ZampaGentile — Colors & Type
   v1.0 · Maggio 2026
   Brand colors, palette, typographic scale, and semantic
   roles derived from the official Brand Kit v3.0.
   ========================================================= */

/* ----- Webfonts (project-local) ----- */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Lato — body face */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =========================================================
   1. COLOR TOKENS
   ========================================================= */
:root {
  /* —— Brand primaries (from Brand Kit v3 §9) —— */
  --zg-blue:           #0D1B2A;   /* Primario — fiducia, professionalità */
  --zg-orange:         #FF7A00;   /* Accento HV — energia, calore, CTA */
  --zg-yellow:         #FFD600;   /* Secondario HV — alert, visibilità */
  --zg-white:          #FFFFFF;
  --zg-black:          #000000;
  --zg-gray-dark:      #4F4F4F;   /* Testo secondario, didascalie */

  /* —— Blue scale (tinted from #0D1B2A) —— */
  --zg-blue-950:       #060D14;
  --zg-blue-900:       #0D1B2A;   /* base */
  --zg-blue-800:       #142537;
  --zg-blue-700:       #1E3550;
  --zg-blue-600:       #2C4A6E;
  --zg-blue-500:       #3F6594;
  --zg-blue-300:       #8AA6C7;
  --zg-blue-100:       #D6E1EE;
  --zg-blue-50:        #EEF3F9;

  /* —— Orange scale (tinted from #FF7A00) —— */
  --zg-orange-900:     #7A3500;
  --zg-orange-700:     #C25A00;
  --zg-orange-600:     #E66B00;
  --zg-orange-500:     #FF7A00;   /* base */
  --zg-orange-400:     #FF9533;
  --zg-orange-300:     #FFB066;
  --zg-orange-200:     #FFCB99;
  --zg-orange-100:     #FFE3C2;
  --zg-orange-50:      #FFF4E6;

  /* —— Neutrals (warm-cool greys for UI) —— */
  --zg-cream:          #FAF6F1;   /* paper bg — soft, dog-friendly */
  --zg-sand:           #F1EBE2;
  --zg-stone-100:      #ECECEC;
  --zg-stone-200:      #D9D9D9;
  --zg-stone-300:      #BFBFBF;
  --zg-stone-400:      #8C8C8C;
  --zg-stone-500:      #4F4F4F;   /* alias of --zg-gray-dark */
  --zg-stone-700:      #2B2B2B;
  --zg-stone-900:      #111111;

  /* —— Semantic role colors —— */
  --color-bg:                var(--zg-white);
  --color-bg-alt:            var(--zg-cream);
  --color-bg-inverse:        var(--zg-blue-900);
  --color-bg-inverse-alt:    var(--zg-blue-800);

  --color-fg:                var(--zg-blue-900);
  --color-fg-muted:          var(--zg-gray-dark);
  --color-fg-subtle:         var(--zg-stone-400);
  --color-fg-inverse:        var(--zg-white);
  --color-fg-inverse-muted:  var(--zg-blue-100);

  --color-accent:            var(--zg-orange-500);
  --color-accent-hover:      var(--zg-orange-600);
  --color-accent-press:      var(--zg-orange-700);
  --color-accent-soft:       var(--zg-orange-50);
  --color-accent-fg:         var(--zg-white);

  --color-attention:         var(--zg-yellow);     /* alert gentili */

  --color-border:            #E6E6E6;
  --color-border-strong:     #BFBFBF;
  --color-divider:           #F0F0F0;

  --color-focus-ring:        color-mix(in oklab, var(--zg-orange-500) 70%, transparent);

  /* —— Status (derived; semantic only) —— */
  --color-success:           #2F7D5B;
  --color-warning:           var(--zg-yellow);
  --color-danger:            #C0392B;
  --color-info:              var(--zg-blue-600);

  /* —— Surfaces & elevation —— */
  --surface-1:               var(--zg-white);
  --surface-2:               var(--zg-cream);
  --surface-3:               #FFFFFF;
  --surface-inverse:         var(--zg-blue-900);

  /* —— Shadows (soft, low-fi · paper-like) —— */
  --shadow-xs:  0 1px 2px rgba(13,27,42,0.06);
  --shadow-sm:  0 2px 6px rgba(13,27,42,0.07), 0 1px 2px rgba(13,27,42,0.04);
  --shadow-md:  0 8px 20px rgba(13,27,42,0.08), 0 2px 6px rgba(13,27,42,0.04);
  --shadow-lg:  0 18px 40px rgba(13,27,42,0.12), 0 6px 12px rgba(13,27,42,0.06);
  --shadow-glow-orange: 0 8px 24px rgba(255,122,0,0.25);

  /* —— Radii —— */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* —— Spacing scale (4px base) —— */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* =========================================================
   2. TYPOGRAPHY TOKENS
   ========================================================= */
:root {
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (rem-friendly; tuned for the 14–36pt brand range) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-26: 1.625rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;
}

/* =========================================================
   3. SEMANTIC TYPE ROLES
   ========================================================= */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-30), 2.4vw + 1rem, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-26), 1.6vw + 1rem, var(--fs-44));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-fg);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-20), 1vw + 1rem, var(--fs-30));
  line-height: var(--lh-snug);
  color: var(--color-fg);
}
.h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}
.lead, p.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-muted);
}
.body, p, li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
}
.body-sm, small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.caption {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--color-fg-subtle);
}
.quote {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-22);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-muted);
}
.btn-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-15);
  letter-spacing: 0.01em;
}
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--zg-stone-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

/* =========================================================
   4. UTILITY HELPERS
   ========================================================= */
.bg-blue      { background: var(--zg-blue-900); color: var(--zg-white); }
.bg-blue-alt  { background: var(--zg-blue-800); color: var(--zg-white); }
.bg-cream     { background: var(--zg-cream); color: var(--zg-blue-900); }
.bg-white     { background: var(--zg-white); color: var(--zg-blue-900); }
.fg-orange    { color: var(--zg-orange-500); }
.fg-muted     { color: var(--color-fg-muted); }