/* ============================================================
   AI BOX — base.css
   Design tokens, reset, global utilities, typography roles.
   Every global colour, size and timing lives here: add a token
   first, then reference it — never hardcode values elsewhere.
   ============================================================ */

/* ---------- Font (self-hosted, GDPR-safe: no Google CDN) ---------- */
/* Single variable file covers every weight the site uses (400–600). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  /* Colour — monochrome dark + spectral cyan accent */
  --bg:            #0a0a0b;
  --bg-elev:       #111113;
  --bg-elev-2:     #17171a;
  --fg:            #fafaf7;
  --fg-muted:      #9a9aa0;
  --fg-faint:      #66666c;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent:        #6ee7f9;   /* spectral cyan — used sparingly */
  --accent-2:      #a78bfa;   /* violet — secondary glow only   */
  --accent-ink:    #04181c;
  --hover-wash:    rgba(255, 255, 255, 0.05);
  --nav-scrim:     rgba(10, 10, 11, 0.72);
  --card-scrim:    rgba(10, 10, 11, 0.85);

  /* WhatsApp — the one conversion channel of the whole site */
  --whatsapp:      #25d366;
  --whatsapp-ink:  #04180f;

  /* Font family */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Semantic type roles — reference these, never raw sizes */
  --text-h1:      clamp(2rem, 5vw, 4.2rem);
  --text-h2:      clamp(1.8rem, 4vw, 3.2rem);
  --text-h3:      clamp(1.25rem, 2.4vw, 1.75rem);
  --text-lead:    clamp(1.05rem, 1.6vw, 1.4rem);
  --text-body:    1rem;
  --text-small:   0.9rem;
  --text-label:   0.75rem;    /* uppercase eyebrows, dates, column titles */
  --text-micro:   0.6875rem;  /* uppercase tags */
  --text-step:    clamp(2.6rem, 6vw, 4.5rem);   /* "Come funziona" big numerals */

  /* Font weights — load only these in the Google Fonts URL */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Letter-spacing — per-case only, never on body copy */
  --tracking-display: -0.03em;  /* display and h1 only */
  --tracking-heading: -0.02em;  /* h2, h3, card titles  */
  --tracking-caps:     0.14em;  /* uppercase labels only */

  /* Line-height */
  --leading-h1:      1.05;
  --leading-h2:      1.08;
  --leading-body:    1.6;

  /* Spacing (8px rhythm) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 16px;  --sp-4: 24px;
  --sp-5: 32px;  --sp-6: 48px;  --sp-7: 64px;  --sp-8: 96px;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-lg: 22px;
  --nav-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 250ms;
  --t-base: 400ms;
  --t-slow: 700ms;
}

/* Reduced motion: zero every duration token globally, so all
   transitions honour the preference without per-rule queries. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Anchor targets scroll clear of the fixed nav. */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-2)); }

/* Native visibility toggle */
[hidden] { display: none !important; }

/* Prevent body scroll while a modal/menu is open */
body.no-scroll { overflow: hidden; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(48px, 7vw, 96px); }

/* ---------- Typography utilities ---------- */
.h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-h1);
}

.h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-h2);
}

.h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
}

.lead {
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  color: var(--fg-muted);
}

.muted { color: var(--fg-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Accessibility utilities ---------- */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 9999;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  border-radius: var(--sp-1);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}