/* ============================================================
   ETS COMMUNICATION — COLOR & TYPE FOUNDATIONS
   Agenzia di comunicazione 360° — Massa-Carrara, Toscana
   ------------------------------------------------------------
   Fonts: League Spartan (headings) + Montserrat (body)
   Self-hosted brand variable fonts from /fonts (no CDN).
   ============================================================ */

@font-face {
  font-family: 'League Spartan';
  src: url('fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- CORE BRAND PALETTE ---------- */
  /* The three primary blocks from the brand palette board. */
  --ets-blue:        #191BDF;  /* Electric blue — primary surface, white text   */
  --ets-black:       #09080D;  /* Near-black ink — dark surface, orange text     */
  --ets-orange:      #FE6807;  /* Signal orange — action/accent, black text      */
  --ets-white:       #FFFFFF;

  /* ---------- EXTENDED / DERIVED ---------- */
  /* Tints & shades derived in-hue from the three cores. Use only
     when the three pure blocks are too restrictive (overlays,
     hovers, borders). Never invent off-brand hues. */
  --ets-blue-700:    #1416B0;  /* pressed / deep blue                  */
  --ets-blue-300:    #6365EA;  /* muted blue on dark                   */
  --ets-blue-100:    #E6E6FC;  /* faint blue wash / tinted surface     */
  --ets-orange-600:  #E25500;  /* orange hover/press                   */
  --ets-orange-100:  #FFE7D5;  /* faint orange wash                    */
  --ets-ink-800:     #14131A;  /* raised dark card on black            */
  --ets-ink-600:     #2A2932;  /* hairline / border on black          */
  --ets-grey-500:    #6E6D75;  /* muted body text on light             */
  --ets-grey-300:    #B6B5BC;  /* disabled / captions on light         */
  --ets-grey-100:    #F3F3F5;  /* light page background, off-white      */
  --ets-line:        #E3E3E8;  /* hairline border on light             */

  /* ---------- SEMANTIC ROLES ---------- */
  /* Default (light) context */
  --bg:              var(--ets-white);
  --bg-subtle:       var(--ets-grey-100);
  --surface:         var(--ets-white);
  --fg:              var(--ets-black);   /* primary text          */
  --fg-muted:        var(--ets-grey-500);/* secondary text        */
  --fg-faint:        var(--ets-grey-300);/* captions / disabled   */
  --accent:          var(--ets-orange);  /* primary action        */
  --accent-ink:      var(--ets-black);   /* text ON orange        */
  --brand:           var(--ets-blue);    /* brand surfaces        */
  --brand-ink:       var(--ets-white);   /* text ON blue          */
  --border:          var(--ets-line);
  --focus-ring:      var(--ets-blue);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'League Spartan', 'Arial Narrow', sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE ---------- (1.25 major-third, fluid) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.41rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.71rem + 1.20vw, 2.67rem);
  --step-4:  clamp(2.44rem, 2.07rem + 1.85vw, 3.55rem);
  --step-5:  clamp(3.05rem, 2.48rem + 2.85vw, 4.74rem);
  --step-6:  clamp(3.82rem, 2.96rem + 4.30vw, 6.31rem);

  /* ---------- SPACING (8pt base) ---------- */
  --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: 96px;  --space-10: 128px;

  /* ---------- RADII ---------- (brand leans sharp; rounding is sparing) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --border-hair: 1px solid var(--border);
  --border-bold: 2px solid var(--ets-black);

  /* ---------- SHADOWS ---------- (used sparingly; brand prefers flat blocks) */
  --shadow-sm: 0 1px 2px rgba(9,8,13,0.06);
  --shadow-md: 0 8px 24px rgba(9,8,13,0.10);
  --shadow-lg: 0 24px 60px rgba(9,8,13,0.16);
  /* Signature "hard" offset shadow — brutalist block accent */
  --shadow-hard: 6px 6px 0 var(--ets-black);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- HEADINGS ---------- */
/* League Spartan is geometric & tight. Display headings are set
   UPPERCASE or tight-tracked, heavy weight, with snug leading. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 0.4em;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.015em;
}
h3, .h3 {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.05;
}
h4, .h4 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.15;
}

/* ---------- EYEBROW / KICKER ---------- */
/* Small all-caps label, wide tracking — used above section titles */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- BODY ---------- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  margin: 0 0 1em;
  text-wrap: pretty;
}
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  font-weight: 500;
  color: var(--fg);
}
small, .caption {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* ---------- STAT / BIG NUMBER ---------- (Sezione Numeri) */
.stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-6);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* ---------- LINKS ---------- */
a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ets-orange); text-decoration: underline; }

/* ---------- INVERSE CONTEXTS ---------- */
/* Apply to dark sections: black bg, white/orange text */
.on-dark {
  --bg: var(--ets-black);
  --surface: var(--ets-ink-800);
  --fg: var(--ets-white);
  --fg-muted: #9C9BA4;
  --fg-faint: #6E6D75;
  --border: var(--ets-ink-600);
  background: var(--ets-black);
  color: var(--ets-white);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--ets-white); }
.on-dark .eyebrow { color: var(--ets-orange); }

/* Apply to blue sections: blue bg, white text, orange accents */
.on-blue {
  --bg: var(--ets-blue);
  --surface: var(--ets-blue-700);
  --fg: var(--ets-white);
  --fg-muted: #C7C8F7;
  --border: rgba(255,255,255,0.18);
  background: var(--ets-blue);
  color: var(--ets-white);
}
.on-blue h1, .on-blue h2, .on-blue h3, .on-blue h4 { color: var(--ets-white); }
.on-blue .eyebrow { color: var(--ets-orange); }

/* Apply to orange sections: orange bg, black text */
.on-orange {
  --bg: var(--ets-orange);
  --fg: var(--ets-black);
  --fg-muted: #6b3a16;
  --border: rgba(9,8,13,0.18);
  background: var(--ets-orange);
  color: var(--ets-black);
}
.on-orange .eyebrow { color: var(--ets-blue); }