/* =========================================================================
   FATTORIA TÈGONI — DESIGN TOKENS
   Allineato al Brand Book: Lino Grezzo + Verde Oliva + Terracotta Dorata +
   Grigio Ardesia. Font: Orleans Brightens (serif display, maiuscolo) +
   Compendium (script) + Manrope (testo).
   ========================================================================= */

/* ---- Font self-hosted (brand) ----------------------------------------- */
@font-face {
  font-family: "Orleans Brightens";
  src: url("../public/fonts/OrleansBrightens.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Orleans Brightens";
  src: url("../public/fonts/OrleansBrightens-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Compendium";
  src: url("../public/fonts/Compendium.woff2") format("woff2"),
       url("../public/fonts/Compendium.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colore: base (Brand Book) -------------------------------------- */
  --olive-950: #161B0E;   /* oliva profondissimo: scrim hero                 */
  --olive-900: #232B16;   /* oliva scuro: fondali immersivi/sezioni scure    */
  --olive-800: #313B22;   /* oliva scuro elevato                            */
  --olive-700: #455330;   /* oliva medio                                    */
  --sage-500:  #556B2F;   /* VERDE OLIVA brand: accento verde / eyebrow      */
  --sage-300:  #9AA77C;   /* oliva chiara: dettagli su scuro                */

  --paper-50:  #FBF9F3;   /* lino chiarissimo: bande alternate              */
  --cream-100: #F5F2EB;   /* LINO GREZZO brand: sfondo chiaro principale     */
  --cream-200: #E7E0D0;   /* lino ombreggiato: bordi/divisori su chiaro     */
  --sand-300:  #DED5C2;   /* sabbia/lino caldo: superfici                   */

  --terra-600: #A8692C;   /* terracotta scura: hover/pressed CTA            */
  --terra-500: #C27D38;   /* TERRACOTTA DORATA brand: ACCENTO unico (CTA)    */
  --terra-300: #D9A266;   /* terracotta chiara: accenti su scuro           */

  --ink-900:   #4A4E4D;   /* GRIGIO ARDESIA brand: testi e loghi            */
  --ink-600:   #6B6E68;   /* testo secondario su chiaro                     */

  /* ---- Colore: ruoli semantici ---------------------------------------- */
  --bg-dark:        var(--olive-900);
  --bg-darker:      var(--olive-950);
  --bg-light:       var(--cream-100);
  --bg-light-alt:   var(--paper-50);
  --surface-warm:   var(--sand-300);

  --text-on-dark:        var(--cream-100);
  --text-on-dark-soft:   color-mix(in oklab, var(--cream-100) 72%, var(--olive-900));
  --text-on-light:       var(--ink-900);
  --text-on-light-soft:  var(--ink-600);

  /* Accent: la terracotta brand (#C27D38) è troppo chiara per testo su lino
     (2.99:1). Su CHIARO uso una terracotta più profonda (AA ≥4.5:1); su SCURO
     resta brillante. #C27D38 vive come identità su scuro + grandi campiture. */
  --accent:         #A05B1A;            /* terracotta profonda: testi/CTA su lino (AA ≥4.5) */
  --accent-hover:   #844914;
  --accent-on-dark: var(--terra-300);   /* #D9A266 brillante su scuro */

  --rule-on-light:  color-mix(in oklab, var(--ink-900) 16%, transparent);
  --rule-on-dark:   color-mix(in oklab, var(--cream-100) 18%, transparent);

  /* ---- Tipografia ------------------------------------------------------ */
  --font-display: "Orleans Brightens", "Cormorant Garamond", Georgia, serif; /* serif maiuscolo */
  --font-script:  "Compendium", "Cormorant Garamond", cursive;               /* script accenti  */
  --font-body:    "Manrope", "Helvetica Neue", system-ui, sans-serif;

  /* Scala fluida (clamp): VISUAL_DENSITY 3 → arieggiata, titoli grandi */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.8rem + 2vw, 3.6rem);
  --step-4:  clamp(2.9rem, 2.1rem + 3.6vw, 5.2rem);
  --step-5:  clamp(3.6rem, 2.2rem + 6vw, 7.2rem);

  --leading-tight:  1.06;
  --leading-snug:   1.18;
  --leading-body:   1.72;
  --tracking-wide:  0.22em;   /* eyebrow / micro-label */
  --tracking-tight: 0.01em;   /* display Orleans (maiuscolo): leggero positivo */

  /* ---- Spazio & layout ------------------------------------------------- */
  --space-section: clamp(5.5rem, 4rem + 7vw, 11rem);  /* respiro tra sezioni */
  --space-block:   clamp(1.5rem, 1.2rem + 1.4vw, 3rem);
  --measure:       62ch;            /* larghezza testo leggibile           */
  --container:     1320px;          /* contenitore massimo                 */
  --gutter:        clamp(1.25rem, 0.8rem + 3vw, 4rem);

  /* ---- Forma: un solo sistema di raggi (soft, coerente) ---------------- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-quiet: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   240ms;
  --dur-med:    600ms;
  --dur-slow:   1000ms;

  /* ---- Z-scale --------------------------------------------------------- */
  --z-nav:    100;
  --z-overlay: 80;
  --z-grain:  60;
}