/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * genre: editorial · macrostructure: Narrative Workflow
 * theme: custom · vibe: "avocado, rubrica rossa, calore clinico"
 * paper: oklch(97.3% 0.009 108) · accent: oklch(48% 0.115 130) verde foglia
 * mark: oklch(52% 0.185 27) rosso nocciolo · display: Fraunces · body: IBM Plex Sans
 * paper-band: light · display-style: roman-serif · accent-hue: chromatic-green
 * nav: N6 Masthead · footer: Ft4 Colophon denso
 *
 * ─────────────────────────────────────────────────────────────────────────
 *  PALETTE — derivata dal logo «Dott.ssa Maria Boffa».
 *
 *  Il logo porta quattro colori: la polpa giallo-verde dell'avocado, la
 *  foglia verde piu' satura, il picciolo marrone e il nocciolo rosso con
 *  le posate bianche. Qui diventano:
 *
 *   · carta e neutri  → la polpa, desaturata (tinta calda, hue ~108)
 *   · accento         → la foglia, abbassata di luminosita' fino a reggere
 *                       il testo bianco (5.8:1) senza smettere di essere
 *                       quel verde
 *   · marca           → il rosso del nocciolo, quasi al valore originale.
 *                       E' la rubrica: numeri delle fasi, asterischi dei
 *                       campi obbligatori. Sotto l'1% della viewport.
 *   · avviso          → il marrone del picciolo, virato ad ambra
 *
 *  Tutti i colori del sito nascono qui e solo qui: nessun altro file
 *  contiene un valore cromatico letterale.
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Colore ─────────────────────────────────────────────── */
  /* Superfici: la polpa dell'avocado, portata a carta */
  --color-paper:      oklch(97.3% 0.009 108);   /* #f6f7f0 */
  --color-paper-2:    oklch(95.0% 0.012 108);   /* #efefe6 */
  --color-paper-3:    oklch(92.0% 0.015 112);   /* #e4e6db */

  /* Filetti e bordi */
  /* Il capello ha tre valori perche' il tema ha tre superfici: un solo
     valore sarebbe piu' chiaro della sabbia e i separatori sparirebbero
     proprio dove la pagina cambia fondo. */
  --color-hairline:      oklch(89.5% 0.012 110);  /* su carta */
  --color-hairline-tint: oklch(87.0% 0.013 110);  /* su carta alzata */
  --color-hairline-sand: oklch(79.5% 0.020 92);   /* su sabbia */
  /* La sabbia e' piu' scura della carta, quindi il testo di servizio e i
     bordi dei controlli vanno riportati sopra soglia: 4.6:1 e 3.3:1
     misurati sulla sabbia *con la grana stesa sopra*, non su quella
     nominale — e' li' che il testo vive davvero. */
  --color-neutral-sand:  oklch(46.0% 0.011 100);
  --color-field-sand:    oklch(54.0% 0.013 100);
  --color-sand-2:        oklch(84.5% 0.022 90);   /* sabbia alzata, hover */
  --color-rule:       oklch(85.0% 0.014 112);   /* #cecfc5 · decorativo */
  --color-rule-firm:  oklch(73.0% 0.016 115);   /* #a7a99e · decorativo marcato */
  --color-field:      oklch(60.0% 0.013 118);   /* #7f8179 · bordi dei controlli, 3.7:1 */

  /* Testo */
  --color-neutral:    oklch(52.0% 0.011 108);   /* #696962 · terziario, 5.1:1 */
  --color-muted:      oklch(43.0% 0.014 105);   /* #515048 · secondario, 7.5:1 */
  --color-ink:        oklch(21.0% 0.014 100);   /* #1a1911 · primario, 16.4:1 */

  /* Il fondo scuro e' un nero caldo — l'inchiostro della firma sul logo —
     non un nero verde. Il verde resta un colore che si fa, non un colore
     che si abita: se copre una banda intera smette di essere un accento. */
  --color-ink-deep:   oklch(20.0% 0.014 62);
  --color-sand:       oklch(88.0% 0.022 88);    /* terza superficie, banda calda */

  /* Quarta superficie: un sospiro di foglia sulla carta. Serve alle
     campate chiare grandi, dove carta su carta non fa volume. */
  --color-tint:       oklch(95.8% 0.020 128);
  --color-tint-hair:  oklch(88.0% 0.020 128);

  /* Veli e tratti sopra le fotografie. Vivono qui perche' un valore
     cromatico sciolto in un foglio di layout e' il primo passo verso
     otto colori invece di tre. */
  /* La rampa dell'apertura su mobile: in fondo e' quasi piena e sale
     dissolvendosi. Il testo non sta «sopra una foto velata», sta su un
     pannello scuro che si scioglie nella fotografia — e' la differenza
     fra un velo subito e un velo disegnato. */
  --color-scrim-deep:  oklch(15.0% 0.014 62 / 0.95);
  --color-scrim:       oklch(18.0% 0.016 62 / 0.70);   /* velo dal basso, apertura */
  --color-scrim-side:  oklch(18.0% 0.016 62 / 0.55);   /* velo da sinistra, apertura */
  /* Velo della testata. Tarato sul caso peggiore — fotografia molto
     chiara e uniforme, tavolo bianco in piena luce — dove a 0.55 le voci
     di menu scendevano a 4.1:1. A 0.68 stanno a 6.3:1. */
  --color-scrim-head-1: oklch(18.0% 0.016 62 / 0.68);
  --color-scrim-head-2: oklch(18.0% 0.016 62 / 0.34);
  --color-scrim-head-3: oklch(18.0% 0.016 62 / 0.18);
  --color-scrim-head-4: oklch(18.0% 0.016 62 / 0.07);
  --color-scrim-head-5: oklch(18.0% 0.016 62 / 0.02);
  --color-over-text:   oklch(92.0% 0.010 90);
  --color-over-rule:   oklch(90.0% 0.008 90 / 0.22);
  --color-over-rule-2: oklch(90.0% 0.008 90 / 0.55);
  --color-over-fill:   oklch(97.0% 0.008 90 / 0.12);

  /* Accento: la foglia, abbassata finche' regge il testo chiaro */
  --color-accent:     oklch(48.0% 0.115 130);   /* #476a18 · 5.8:1 */
  --color-accent-2:   oklch(40.0% 0.100 130);   /* #35520b · stato premuto */
  /* Accento scurito per il testo sulla sabbia: li' quello normale sta a
     4.01:1, sotto soglia. A L42 sale a 5.23:1. */
  --color-accent-deep:oklch(42.0% 0.115 130);
  --color-accent-tint:oklch(93.5% 0.038 125);   /* #e3eed3 · fondo tenue */
  --color-focus:      oklch(52.0% 0.150 130);   /* #4b7800 · 4.9:1 */

  /* Marca: il rosso del nocciolo. Solo rubrica, mai fondo, mai bottone. */
  --color-mark:       oklch(52.0% 0.185 27);    /* #bc2826 · 5.6:1 */

  /* Stati funzionali */
  --color-ok:         oklch(44.0% 0.110 130);   /* verde, coerente con l'accento */
  --color-ok-tint:    oklch(94.0% 0.040 125);
  --color-warn:       oklch(50.0% 0.110 62);    /* #8f520d · il picciolo, virato ambra */
  --color-warn-tint:  oklch(94.5% 0.038 75);
  --color-error:      oklch(47.0% 0.175 25);    /* #a71922 · piu' cupo della marca */
  --color-error-tint: oklch(94.0% 0.030 27);

  /* Testo sopra i fondi pieni */
  --color-on-accent:  oklch(97.5% 0.012 100);   /* il bianco panna delle posate */
  --color-on-ink:     oklch(95.0% 0.012 100);
  --color-on-ink-mute:oklch(75.0% 0.016 88);
  --color-on-ink-rule:oklch(51.0% 0.014 70);

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", ui-sans-serif, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Scala quarta giusta (1.25 in basso, 1.333 in alto), fluida */
  --text-2xs:  0.6875rem;
  --text-xs:   0.78125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --text-xl:   clamp(1.25rem,  0.6vw  + 1.1rem, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.1vw  + 1.2rem, 2rem);
  --text-3xl:  clamp(1.875rem, 1.9vw  + 1.3rem, 2.75rem);
  --text-4xl:  clamp(2.25rem,  3.1vw  + 1.4rem, 3.75rem);
  --text-display-s: clamp(2.5rem, 4.2vw + 1.4rem, 4.5rem);
  --text-display:   clamp(2.5rem, 5.6vw + 1.4rem, 5.75rem);   /* il minimo serve ai 320px */

  /* Crenatura ottica. Non un valore solo per tutti i titoli: la
     spaziatura giusta e' funzione del corpo. Piu' il testo e' grande,
     piu' va stretto — altrimenti a 5rem le lettere galleggiano. Sotto
     il corpo del testo si torna a zero, e le etichette in mono si
     aprono, perche' il maiuscoletto va respirato. */
  --track-display: -0.035em;
  --track-title:   -0.022em;
  --track-lead:    -0.011em;
  --track-body:     0em;
  --track-label:    0.085em;

  --leading-display: 1.04;
  --leading-tight:   1.18;
  --leading-body:    1.62;
  --leading-loose:   1.75;

  --measure:       65ch;
  --measure-tight: 52ch;

  /* ── Spazio (base 4pt) ──────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --strip-h: 2.25rem;                 /* fascia di servizio in testata */
  --bar-h:   clamp(4.25rem, 7vw, 5.5rem);  /* barra principale */

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --page-max:    75rem;
  --prose-max:   42rem;

  /* ── Filetti e raggi ────────────────────────────────────── */
  --rule-hair: 1px;
  --rule-firm: 2px;
  --rule-slab: 4px;

  /* I raggi salgono. A 2-3px un angolo non legge come una scelta, legge
     come un bordo che non e' stato finito; e' la differenza piu' netta
     fra un'interfaccia costruita e una disegnata. Restano sotto il
     livello "pillola": una pillola accanto a un serif da rivista
     sembrerebbe un costume preso in prestito. */
  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ── Movimento ──────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-slow:  640ms;   /* la sola entrata orchestrata della pagina */

  /* Materiale traslucido. La saturazione alzata prima della sfocatura e'
     cio' che impedisce al velo di spegnere i colori sotto: senza, una
     barra sfocata ingrigisce tutto quello che copre. */
  --material: saturate(180%) blur(20px);

  /* ── Grana ──────────────────────────────────────────────────
     Rumore frattale SVG, compresso verso il bianco (0.86–1.0) e steso
     in moltiplicazione: i coefficienti sono tarati a misura, non a occhio
     — deviazione standard ~6 su 255, che si vede come fibra e non come
     sporco. Scurisce al massimo del 15%, quindi non sposta il colore,
     lo rende materia. E' quello che fa leggere una campata
     chiara come carta invece che come vuoto.
     Nasce qui perche' e' una texture del sistema, non di una pagina. */
  /* Freccia dei menu a tendina. Il colore e' cotto dentro l'SVG perche'
     un data URI non legge le variabili CSS: vale #696962, cioe'
     --color-neutral. Se quello cambia, va cambiato anche qui. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23696962' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.60' intercept='0.62'/%3E%3CfeFuncG type='linear' slope='0.60' intercept='0.62'/%3E%3CfeFuncB type='linear' slope='0.60' intercept='0.62'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size: 220px 220px;

  /* ── Profondita' ────────────────────────────────────────── */
  /* Una sola ombra, larga e quasi assente: serve a staccare, non a
     sollevare. Ombre corte e scure fanno sembrare gli elementi incollati
     un centimetro sopra la pagina. */
  --shadow-soft:    0 12px 32px -12px oklch(20% 0.014 62 / 0.14);
  --shadow-whisper: 0 1px 2px oklch(21% 0.015 130 / 0.05);
  /* Piu' marcata delle altre: i bottoni della barra in basso galleggiano
     sopra contenuto in movimento e senza stacco si confondono. */
  --shadow-dock:    0 8px 24px -8px oklch(20% 0.014 62 / 0.38);

  /* Quanto deve stare sotto la testata fissa un'ancora di pagina. */
  --anchor-offset: calc(var(--strip-h) + var(--bar-h) + var(--space-lg));

  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}