/* =====================================================================
   San Marco Vision — base.css
   Reset + token comuni + utility di accessibilità + componenti "stampa"
   (placeholder, crocino di registro, crop marks) condivisi dalle 3 versioni.
   Ogni versione (v1/v2/v3.css) ridefinisce i token --* in :root.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--text, #0b1320);
  background: var(--paper, #fff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* ---- Token di default (sovrascritti da ogni versione) ---- */
:root {
  --paper: #ffffff;
  --ink: #0a2540;
  --accent: #0090ff;
  --accent-2: #18c7ff;
  --text: #0b1320;
  --muted: #5b6b80;
  --hairline: #c9d6e5;
  --bg-soft: #eef4ff;
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", monospace;
}

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 140px); }
section { position: relative; }

/* ---- Accessibilità ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* =====================================================================
   Componente PLACEHOLDER (al posto delle immagini)
   <div class="ph ph--16x9" data-label="Hero · video" role="img" aria-label="..."></div>
   ===================================================================== */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  background-color: var(--bg-soft);
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--ink) 6%, transparent) 0 2px,
      transparent 2px 14px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: blur(2px);
}
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--fill { aspect-ratio: auto; height: 100%; width: 100%; border-radius: 0; }

/* =====================================================================
   CROCINO DI REGISTRO (registration mark) — firma "tipografia"
   <span class="reg" aria-hidden="true"></span>
   ===================================================================== */
.reg {
  --reg-size: 26px;
  display: inline-block;
  width: var(--reg-size);
  height: var(--reg-size);
  flex: none;
  background:
    radial-gradient(circle at center,
      transparent calc(36% - 1px), currentColor 36%, currentColor 44%, transparent calc(44% + 1px)),
    linear-gradient(currentColor, currentColor) center / 100% 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.4px 100% no-repeat;
  color: var(--accent);
}

/* ---- Barra colore CMYK → blu (firma comune) ---- */
.cmyk-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; }
.cmyk-bar i { flex: 1; }
.cmyk-bar i:nth-child(1) { background: #18c7ff; }   /* C */
.cmyk-bar i:nth-child(2) { background: #ff3ea5; }   /* M */
.cmyk-bar i:nth-child(3) { background: #ffd23e; }   /* Y */
.cmyk-bar i:nth-child(4) { background: #0b1320; }   /* K */
.cmyk-bar i:nth-child(5) { background: var(--accent); flex: 2; }

/* =====================================================================
   Scroll reveal (attivato da common.js, degrada senza JS)
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- Stato form (mock) ---- */
.form-status { display: none; }
.form-status.is-visible { display: block; }
form.is-sent .form-grid { display: none; }
form.is-sent .form-status { display: block; }