/* =========================================================
   Design tokens della landing (motore condiviso tra prodotti).
   L'accento arriva da content.mjs (site.accent) e sovrascrive --accent;
   wash e focus ring si ricavano dall'accento con color-mix.
   Tema scuro di default; tema chiaro con [data-theme="light"].
   ========================================================= */

:root,
[data-theme="dark"] {
  /* Superfici (scuro) */
  --surface-page: #181818;
  --surface-raised: #1c1c1c;
  --surface-sunken: #292929;
  --surface-strong: #353535;

  /* Testo (scuro) */
  --content-strong: #ffffff;
  --content-muted: #a8a8aa;
  --content-faint: #626262;
  --content-on-accent: #181818;

  /* Bordi: hairline come inset box-shadow, niente border */
  --stroke-color: #292929;
  --stroke-hairline: inset 0 0 0 1px var(--stroke-color);
  --divider: #292929;
  --stroke-strong: #4a4a4b;         /* bordi di controlli (chip, campi) */

  /* Accento unico: pieno solo sui bottoni, "wash" dietro testo/icone */
  --accent: #c8f04a;                /* valore di riserva: lo imposta il prodotto */
  --accent-hover: #d6f673;
  --accent-wash: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-wash-strong: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-wash-solid: color-mix(in srgb, var(--accent) 55%, transparent);

  /* Secondario raro */
  --secondary: #14605a;
  --secondary-deep: #0a2e2c;

  /* Interazione */
  --hover-tint: rgba(255, 255, 255, 0.04);
  --danger: #ff6b6b;                /* errori di validazione/invio */
  --danger-wash: rgba(255, 107, 107, 0.1);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  /* Ombre: solo per layer flottanti */
  --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);

  /* Scrim (unico caso in cui e ammesso il gradiente) */
  --scrim: radial-gradient(ellipse at center, rgba(24, 24, 24, 0.92) 0%, rgba(24, 24, 24, 0.6) 45%, rgba(24, 24, 24, 0) 75%);

  /* Raggi */
  --radius-sm: 6px;
  --radius-md: 10px;   /* card, bottoni, input */
  --radius-lg: 12px;   /* card grandi */
  --radius-pill: 9999px;

  /* Tipografia */
  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-display: -0.01em;
  --tracking-mono: 0.08em;

  /* Ritmo */
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1268px;
  --section-pad: clamp(88px, 13vw, 176px);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
}

/* Tema chiaro (sezioni bianche) */
[data-theme="light"] {
  --surface-page: #ffffff;
  --surface-raised: #f5f5f5;
  --surface-sunken: #ececec;
  --surface-strong: #e2e2e4;

  --content-strong: #202020;
  /* #89898A da DS non regge il contrasto AA sul bianco per testo piccolo:
     muted scurito per il corpo, faint resta il valore DS (solo etichette grandi/decorative) */
  --content-muted: #5f5f63;
  --content-faint: #89898a;

  --stroke-color: #e9e9eb;
  --stroke-hairline: inset 0 0 0 1px var(--stroke-color); /* ridefinito: le var composte si risolvono dove sono dichiarate */
  --divider: #e2e2e4;
  --stroke-strong: #c9c9cc;
  --danger: #c62828;
  --danger-wash: rgba(198, 40, 40, 0.08);

  --hover-tint: rgba(0, 0, 0, 0.035);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent), #000 35%);
}