/* art-tokens.css — generato da ART.md. Unica fonte di verità di colore, tipo, spazio, luce, movimento.
   Un valore cromatico scritto a mano dentro un componente è un bug: qui, o da nessuna parte.
   I colori sono campionati dal JPG del logo (§4 di ART.md), non inventati. */

:root {
  /* ---- COLORE — campionato da static/img/brand/logo-esteso.jpg -------------------------- */
  --crema-logo: #F1E7DE;                    /* il fondo esatto del JPG: la pagina DEVE valere questo */

  --bg-0:      oklch(0.914 0.018 62);       /* fondo pagina */
  --bg-1:      oklch(0.949 0.013 65);       /* fasce e sezioni */
  --bg-2:      oklch(0.975 0.008 70);       /* schede, form, righe calendario */
  --bg-scuro:  oklch(0.245 0.048 45);       /* le due fasce brune: piè di pagina, barra CRM */

  --fg:        oklch(0.285 0.052 45);       /* bruno del logo */
  --fg-2:      oklch(0.505 0.035 48);
  --fg-3:      oklch(0.500 0.030 52);
  --fg-su-scuro: oklch(0.925 0.014 68);
  /* Sulle fasce brune il testo secondario non può essere --fg-2: quello è
     tarato sul crema e sul bruno sparisce. Fino a ieri ogni fascia scura se li
     riscriveva a mano dentro l'HTML — quattro `oklch(...)` sparsi negli
     attributi `style`, cioè quattro colori che vivono fuori da questo file.
     Adesso stanno qui, e `tools/contrasto.py` li misura come tutti gli altri. */
  --fg-2-scuro: oklch(0.790 0.022 58);
  --fg-3-scuro: oklch(0.720 0.026 55);
  --linea-scuro-2: oklch(0.44 0.038 45);

  --linea:     oklch(0.820 0.020 62);       /* crema desaturato — MAI grigio */
  --linea-2:   oklch(0.760 0.024 60);
  --linea-scuro: oklch(0.36 0.035 45);

  --accento:   oklch(0.520 0.090 52);       /* rame/tan. UNO SOLO, max 5% dell'area */
  --accento-fg: oklch(0.975 0.008 70);
  --accento-velo: oklch(0.520 0.090 52 / .10);
  /* Il rame è scelto per stare sul crema: sul bruno fa 2.6:1 e non si vede.
     Sulle fasce scure serve lo stesso rame più chiaro, non un colore nuovo —
     stessa tinta, stessa croma, solo alzato finché non passa la prova. */
  --accento-su-scuro: oklch(0.745 0.095 58);

  --ok:        oklch(0.50 0.08 145);
  --attesa:    oklch(0.56 0.11 75);
  --errore:    oklch(0.52 0.14 28);

  /* I valori di --fg-3 e --accento non sono scelti a occhio: sono i più chiari
     che restano sopra 4.5:1 (WCAG AA) sul fondo più scuro della vetrina, il
     bg-0. Il micro-testo maiuscolo e il testo dentro il bottone principale
     erano rispettivamente a 2.97 e 4.01 — cioè illeggibili al sole, che è
     esattamente dove si guarda il sito di un negozio. */

  /* l'altezza della barra: la sa il menu e la sa la soglia, che ci passa sotto */
  --barra-h: 4.75rem;

  /* gli estremi: in ogni schermata devono esserci entrambi (§3) */
  --nero:      oklch(0.19 0.045 45);
  --bianco:    oklch(0.985 0.004 80);

  /* ---- LUCE — una sola sorgente, alto-sinistra 35°, ombre BRUNE ------------------------- */
  --ombra-1: 0 1px 2px oklch(0.32 0.05 45 / .09);
  --ombra-2: 0 2px 3px oklch(0.32 0.05 45 / .10),
             0 14px 34px -12px oklch(0.32 0.05 45 / .26);
  --ombra-3: 0 3px 6px oklch(0.32 0.05 45 / .12),
             0 30px 60px -22px oklch(0.32 0.05 45 / .40);
  --ombra-dentro: inset 0 1px 0 oklch(1 0 0 / .55);   /* il colpo di luce sul bordo alto */

  /* ---- TIPOGRAFIA — rapporto 116/12 ≈ 9.7× ---------------------------------------------- */
  --f-display: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;
  --f-testo:   'Jost', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --t-display: clamp(3.25rem, 9vw, 7.25rem);
  --t-titolo:  clamp(1.875rem, 4.2vw, 2.875rem);
  --t-sotto:   clamp(1.25rem, 2.2vw, 1.5rem);
  --t-lead:    1.1875rem;
  --t-corpo:   1.0625rem;
  --t-piccolo: 0.9375rem;
  --t-micro:   0.75rem;

  --i-display: 0.92;  --s-display: -0.035em;
  --i-titolo:  1.06;  --s-titolo:  -0.02em;
  --i-corpo:   1.62;
  --i-micro:   1.3;   --s-micro:   0.22em;    /* il tracking del wordmark */

  --misura: 64ch;

  /* ---- SPAZIO — multipli di 4px ---------------------------------------------------------- */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;
  --s9: 6rem;    --s10: 8rem;
  --respiro: clamp(4.5rem, 9vw, 8rem);        /* fra sezioni: 72px mobile → 128px desktop */
  --gabbia: 1180px;                            /* larghezza massima del contenuto */

  /* ---- RAGGI — crescono con l'elemento --------------------------------------------------- */
  --r1: 2px;   /* controlli */
  --r2: 4px;   /* schede */
  --r3: 10px;  /* foto e riquadri grandi */
  --r-pallino: 999px;

  /* ---- MOVIMENTO ------------------------------------------------------------------------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-micro: 140ms;  --d-base: 320ms;  --d-cine: 760ms;  --d-uscita: 220ms;
  --stagger: 60ms;
}

/* ---- GRANA — 3.5%, fissa, sopra tutto tranne i menu (§8) --------------------------------- */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* L'attributo `hidden` viene dal foglio del browser, che ha specificità zero:
   qualunque classe con un `display` lo scavalca e l'elemento resta visibile.
   È già successo due volte (i campi data/ora della prenotazione, il bottone
   della fotocamera). Qui si chiude una volta per tutte. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg);
  font: 300 var(--t-corpo)/var(--i-corpo) var(--f-testo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 300; margin: 0; }
p { margin: 0; }

/* Il foglio del browser dà a `figure` un margine di 1em 40px, e nessuno lo
   guarda mai perché una foto con dell'aria attorno sembra voluta. Nel mosaico
   dei lavori non lo era: le celle erano larghe 283px e le foto 203, cioè
   ottanta pixel esatti di margine invisibile per ognuna, con i buchi fra le
   une e le altre e la griglia che non tornava. Si vede solo misurando, o
   mettendo il mosaico su fondo bruno — dove il buco smette di essere crema su
   crema e diventa un buco. */
figure { margin: 0; }
a { color: inherit; }

/* Etichetta micro: il tracking largo del wordmark. Ricorre ovunque, vetrina e CRM. */
.micro {
  font-size: var(--t-micro);
  line-height: var(--i-micro);
  letter-spacing: var(--s-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
}

/* Il filetto: stesso spessore ottico del tratto del monogramma (§2, riferimento 2). */
.filetto {
  display: block;
  width: 44px; height: 1px;
  background: var(--accento);
  transform-origin: left;
}

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: var(--r1);
}

::selection { background: var(--accento-velo); }

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