/* ============================================================
   Il Roccolo · design tokens
   Hallmark · theme: custom "orto sensoriale, piana, luce bassa"
   Palette e font bloccati dal documento di identita' visiva del brand
   (il-roccolo-identita-visiva.md). Non introdurre valori fuori da qui:
   ogni colore e ogni font della pagina passa da un token.
   ============================================================ */

:root {

  /* --- Carta e inchiostro -------------------------------------------
     crema #FFFBF0 e verde scuro #1F3A24 dal brand, in OKLCH.          */
  --color-paper:     oklch(98.8% 0.015 90);    /* crema, fondo di base   */
  --color-paper-2:   oklch(96.4% 0.020 92);    /* crema calda, fasce alt */
  --color-paper-3:   oklch(93.5% 0.026 95);    /* crema profonda, schede */
  --color-deep:      oklch(32.0% 0.051 149);   /* verde scuro, fasce     */
  --color-deep-2:    oklch(26.5% 0.045 149);   /* verde scuro, piu' giu' */

  --color-ink:       oklch(32.0% 0.051 149);   /* testo su crema         */
  --color-muted:     oklch(45.0% 0.030 145);   /* testo secondario       */
  --color-neutral:   oklch(50.0% 0.022 140);   /* testo terziario, 4.9:1 su paper-3 */
  --color-rule:      oklch(87.0% 0.022 100);   /* filetti su crema       */

  --color-ink-inv:   oklch(98.8% 0.015 90);    /* testo su verde scuro   */
  --color-muted-inv: oklch(83.0% 0.030 120);   /* secondario su scuro    */
  --color-rule-inv:  oklch(45.0% 0.045 149);   /* filetti su scuro       */

  /* --- Colori del brand ---------------------------------------------
     Regola del brand: corallo per i momenti leggeri, terracotta per i
     contenuti con piu' peso (raccolta, stagione, autunno).            */
  --color-sun:       oklch(95.7% 0.106 104);   /* giallo #FCF5A0, firma  */
  --color-leaf:      oklch(80.0% 0.115 128);   /* verde pisello #A8CC7A  */
  --color-coral:     oklch(77.9% 0.110 44);    /* corallo #F2A07C        */
  --color-clay:      oklch(60.0% 0.138 47);    /* terracotta #C1622E     */
  --color-clay-ink:  oklch(52.0% 0.138 47);    /* terracotta da testo su fondo chiaro:
                                                  il #C1622E pieno si ferma a 3.75:1 */

  /* --- Accento operativo ---------------------------------------------
     L'accento della pagina e' verde: link, filetti attivi, marcatori.
     Terracotta e corallo restano legati al contenuto (autunno, raccolta),
     non all'interfaccia.                                              */
  --color-accent:    oklch(45.0% 0.115 145);
  --color-accent-2:  oklch(38.0% 0.100 145);   /* stato premuto          */
  --color-focus:     oklch(52.0% 0.150 145);
  --color-focus-inv: oklch(85.0% 0.130 125);

  /* --- Velature sopra le foto -----------------------------------------
     Servono per tenere leggibile il testo sull'hero. Sono tinte del verde
     scuro, non un colore nuovo.                                        */
  --scrim-strong: oklch(26.5% 0.045 149 / 0.88);
  --scrim-soft:   oklch(26.5% 0.045 149 / 0.34);
  --scrim-mid:    oklch(26.5% 0.045 149 / 0.66);

  /* --- Tipografia -----------------------------------------------------
     Newsreader opsz 72 per i titoli (sempre dritto, mai corsivo),
     Karla per il corpo, Caveat come nota a mano in due punti soli.    */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-body:    "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-hand:    "Caveat", ui-rounded, cursive;

  --text-xs:      0.8rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.375rem;
  --text-xl:      1.75rem;
  --text-2xl:     2.25rem;
  --text-3xl:     2.875rem;
  --text-display-s: clamp(2rem, 4vw + 0.6rem, 3.25rem);
  --text-display:   clamp(2.75rem, 7vw + 0.5rem, 5.25rem);

  /* --- Spazio, scala 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;

  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;

  /* --- Filetti e raggi -------------------------------------------------- */
  --rule-hair: 1px;
  --rule-thick: 2px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --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;

  /* --- Livelli ------------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}