/* =============================================================
   Design system condiviso — vetrina e dashboard
   Non aggiungere qui regole di layout: solo variabili e basi.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap");

:root {
  /* --- Colori ------------------------------------------------ */
  --c-bg: #faf8f5;          /* fondo caldo, quasi carta */
  --c-surface: #ffffff;
  --c-surface-2: #f2ede6;   /* riquadri, campi, stati hover */
  --c-ink: #1c1a17;         /* testo principale */
  --c-ink-soft: #5d5650;    /* testo secondario */
  --c-ink-faint: #97908a;   /* didascalie, note */
  --c-line: #e3dcd2;        /* bordi sottili */
  --c-accent: #9a7b4f;      /* oro spento: bordi, link, dettagli */
  --c-accent-soft: #c9ab7e;
  --c-success: #4a7c59;
  --c-danger: #a4453a;

  /* --- Tipografia -------------------------------------------- */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.5rem;
  --t-3xl: clamp(2.5rem, 7vw, 4.5rem);

  /* --- Spaziature -------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;

  /* --- Forme e ombre ----------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 26, 23, 0.08);
  --shadow-lg: 0 12px 40px rgba(28, 26, 23, 0.12);

  /* --- Movimento --------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;

  /* Altezza della barra di sistema su iPhone con notch */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Il focus deve restare sempre visibile: serve per la tastiera e per
   chi naviga con tecnologie assistive. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visibile solo agli screen reader */
.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;
}