/* =====================================================================
   WARM LEDGER — Studio Grasso · Design Tokens
   Versione 1.0 · 7 ottobre 2026
   ---------------------------------------------------------------------
   Unica fonte di verità per colori, tipografia, raggi, spaziatura,
   layout, bordi, ombre, motion e focus. Copiato verbatim dalla fonte:
   nessun valore va modificato qui (vedi USAGE.md del repo sorgente §7).

   Struttura del file
     A. Token base ............ valori invariati
     B. Alias semantici ....... puntano ai token base, nessun valore nuovo
     C. Estensioni di componente valori di dettaglio non presenti in A
     D. Breakpoint ............ ridefinizioni per media query (mobile first)
     E. prefers-reduced-motion
   ===================================================================== */

:root {
  /* ===================================================================
     A. TOKEN BASE
     =================================================================== */

  /* ----- COLORI — base ----- */
  --color-background:        #F7F3EC;  /* Carta */
  --color-surface:           #FFFDF8;  /* Avorio */
  --color-surface-alt:       #EDE6DA;  /* Sabbia */
  --color-primary:           #12312C;  /* Verde Inchiostro */
  --color-primary-hover:     #1F4A42;  /* Pino */
  --color-footer:            #0E2723;  /* Verde Inchiostro profondo */

  /* ----- COLORI — testo ----- */
  --color-text:              #14201E;  /* Inchiostro */
  --color-text-secondary:    #4F5B57;  /* Grafite verde */
  --color-text-muted:        #5C6A65;  /* Nebbia (≥4.5:1 su carta e avorio) */
  --color-text-on-dark:      #F7F3EC;
  --color-text-on-dark-muted:#A9B4AF;

  /* ----- COLORI — accento ----- */
  --color-accent:            #B5832F;  /* Ottone (decorativo, non testo piccolo) */
  --color-accent-text:       #8A5F1C;  /* Ottone Scuro (testo/link su chiaro) */
  --color-accent-on-dark:    #D4A24C;  /* Ottone Chiaro (su scuro) */
  --color-accent-on-dark-hover: #E0B461;

  /* ----- COLORI — bordi e stati ----- */
  --color-border:            #DDD5C6;
  --color-border-strong:     #BDB39F;
  --color-border-on-dark:    rgba(247, 243, 236, 0.16);
  --color-focus:             #8A5F1C;
  --color-success:           #2A7050;
  --color-warning:           #855A0E;
  --color-error:             #B3382C;

  /* ----- TIPOGRAFIA — famiglie ----- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numbers: var(--font-display);

  /* ----- TIPOGRAFIA — pesi ----- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ----- TIPOGRAFIA — scala (fluida) ----- */
  --text-display: clamp(44px, 6.2vw, 88px);
  --text-h1:      clamp(38px, 4.8vw, 64px);
  --text-h2:      clamp(30px, 3.6vw, 48px);
  --text-h3:      clamp(24px, 2.4vw, 32px);
  --text-h4:      20px;
  --text-body-lg: clamp(18px, 1.5vw, 20px);
  --text-body:    17px;
  --text-body-sm: 15px;
  --text-caption: 13px;
  --text-button:  15px;
  --text-label:   12px;
  --text-stat:    clamp(48px, 5.5vw, 72px);
  --text-quote:   clamp(24px, 2.8vw, 36px);

  /* ----- TIPOGRAFIA — line-height ----- */
  --leading-display: 1.02;
  --leading-h1:      1.06;
  --leading-h2:      1.12;
  --leading-h3:      1.2;
  --leading-h4:      1.3;
  --leading-body-lg: 1.6;
  --leading-body:    1.65;
  --leading-body-sm: 1.55;
  --leading-caption: 1.45;
  --leading-tight:   1;

  /* ----- TIPOGRAFIA — letter-spacing ----- */
  --tracking-display: -0.03em;
  --tracking-h1:      -0.025em;
  --tracking-h2:      -0.02em;
  --tracking-h3:      -0.01em;
  --tracking-h4:      -0.005em;
  --tracking-body:    0;
  --tracking-button:  0.01em;
  --tracking-label:   0.14em;

  /* ----- RAGGI ----- */
  --radius-xs:   4px;
  --radius-sm:   6px;    /* bottoni */
  --radius-input: 8px;
  --radius-md:   14px;   /* card */
  --radius-lg:   20px;   /* immagini */
  --radius-arch: 999px 999px 20px 20px;  /* cornice ad arco */
  --radius-pill: 999px;  /* solo tag/filtri */

  /* ----- SPAZIATURA (base 4px) ----- */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs:  12px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  32px;
  --spacing-xl:  48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  --spacing-5xl: 160px;

  /* ----- LAYOUT ----- */
  --container-max-width: 1240px; /* @kind spacing */
  --container-narrow:    720px; /* @kind spacing */
  --text-measure:        62ch; /* @kind spacing */
  --page-padding:        clamp(20px, 4vw, 64px); /* @kind spacing */
  --grid-gutter:         clamp(16px, 2.2vw, 32px); /* @kind spacing */
  --section-padding-y:   clamp(64px, 9vw, 128px); /* @kind spacing */
  --nav-height:          76px; /* @kind spacing */

  /* ----- BORDI ----- */
  --border-width: 1px;
  --border-default: 1px solid var(--color-border);
  --border-strong:  1px solid var(--color-border-strong);

  /* ----- OMBRE (volutamente assenti) ----- */
  --shadow-none: none;

  /* ----- MOTION ----- */
  --duration-fast:  150ms; /* @kind other */
  --duration-base:  280ms; /* @kind other */
  --duration-slow:  600ms; /* @kind other */
  --duration-hero:  900ms; /* @kind other */
  --duration-count: 1400ms; /* @kind other */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --reveal-distance: 16px; /* @kind spacing */
  --stagger-step: 80ms; /* @kind other */

  /* ----- FOCUS ----- */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;

  /* ----- BREAKPOINT (riferimento; usare nei media query) -----
     mobile ≤ 639px | tablet 640–1023px | laptop 1024–1439px | desktop ≥ 1440px */


  /* ===================================================================
     B. ALIAS SEMANTICI — solo riferimenti ai token base
     (le trasparenze usano color-mix sul token base: nessun nuovo colore)
     =================================================================== */

  /* Superfici */
  --color-bg-page:            var(--color-background);    /* Carta */
  --color-bg-raised:          var(--color-surface);       /* Avorio */
  --color-bg-section-alt:     var(--color-surface-alt);   /* Sabbia */
  --color-bg-section-dark:    var(--color-primary);       /* Verde Inchiostro */
  --color-bg-footer:          var(--color-footer);

  /* Testo */
  --color-heading:            var(--color-primary);       /* titoli su chiaro */
  --color-on-dark:            var(--color-text-on-dark);
  --color-on-dark-muted:      var(--color-text-on-dark-muted);
  --color-link:               var(--color-accent-text);
  --color-link-hover:         var(--color-text);
  --color-link-on-dark:       var(--color-accent-on-dark);
  --color-link-on-dark-hover: var(--color-text-on-dark);
  --color-eyebrow:            var(--color-accent-text);
  --color-eyebrow-on-dark:    var(--color-accent-on-dark);
  --color-placeholder:        var(--color-text-muted);

  /* Bottoni */
  --color-btn-primary-bg:          var(--color-primary);
  --color-btn-primary-bg-hover:    var(--color-primary-hover);
  --color-btn-primary-text:        var(--color-text-on-dark);
  --color-btn-on-dark-bg:          var(--color-accent-on-dark);
  --color-btn-on-dark-bg-hover:    var(--color-accent-on-dark-hover);
  --color-btn-on-dark-text:        var(--color-primary);

  /* Form */
  --color-input-bg:           var(--color-surface);
  --color-input-border:       var(--color-border-strong);
  --color-input-border-hover: var(--color-text-muted);    /* DS5: sostituisce #8A8575 fuori palette */
  --color-input-border-focus: var(--color-primary);
  --color-control-border:     var(--color-text-muted);    /* checkbox: ≥3:1 (WCAG 1.4.11), DS5 */

  /* Trasparenze derivate (color-mix dei token base) */
  --color-nav-scrolled:  color-mix(in srgb, var(--color-background) 86%, transparent);
  --color-row-hover:     color-mix(in srgb, var(--color-primary) 3%, transparent);
  --color-ledger-line:   color-mix(in srgb, var(--color-primary) 6%, transparent);
  --color-accent-ghost:  color-mix(in srgb, var(--color-accent) 25%, transparent);
  --color-overlay-start: color-mix(in srgb, var(--color-primary) 0%, transparent);
  --color-overlay-end:   color-mix(in srgb, var(--color-primary) 62%, transparent);
  /* unico gradiente ammesso */
  --overlay-photo: linear-gradient(to top, var(--color-overlay-end) 0%, var(--color-overlay-end) 40%, var(--color-overlay-start) 100%);

  /* Bordi */
  --border-on-dark:  var(--border-width) solid var(--color-border-on-dark);
  --border-primary:  var(--border-width) solid var(--color-primary);
  --border-accent:   var(--border-width) solid var(--color-accent);

  /* Raggi per ruolo */
  --radius-button:   var(--radius-sm);
  --radius-ghost:    var(--radius-xs);
  --radius-checkbox: var(--radius-xs);
  --radius-card:     var(--radius-md);
  --radius-submenu:  var(--radius-md);
  --radius-image:    var(--radius-lg);
  --radius-tag:      var(--radius-pill);

  /* Ombre per ruolo: sempre nessuna */
  --shadow-card:   var(--shadow-none);
  --shadow-button: var(--shadow-none);
  --shadow-image:  var(--shadow-none);


  /* ===================================================================
     C. ESTENSIONI DI COMPONENTE
     =================================================================== */

  /* Dimensioni */
  --size-touch:          44px; /* @kind spacing */
  --size-btn:            52px; /* @kind spacing */
  --size-btn-sm:         44px; /* @kind spacing */
  --size-input:          56px; /* @kind spacing */
  --size-checkbox:       20px; /* @kind spacing */
  --size-arrow-circle:   32px; /* @kind spacing */
  --size-icon-lg:        24px; /* @kind spacing */
  --size-icon:           20px; /* @kind spacing */
  --size-icon-sm:        16px; /* @kind spacing */
  --size-icon-xs:        12px; /* @kind spacing */
  --size-arrow-glyph:    14px; /* @kind spacing */
  --size-logo:           32px; /* @kind spacing */
  --size-logo-mobile:    26px; /* @kind spacing */
  --stroke-icon:         1.5px; /* @kind other */
  --border-width-hover:  2px; /* @kind other */
  --underline-offset:    3px; /* @kind spacing */

  /* Tipografia di componente */
  --text-input:          16px;
  --text-form-label:     13px;
  --text-consent:        14px;
  --text-nav:            15px;
  --text-wordmark:       24px;
  --text-numeral:        32px;
  --text-accordion:      22px;
  --text-menu-mobile:    36px;
  --leading-menu-mobile: 1.15;
  --tracking-wordmark:   -0.01em;
  --text-stat-mobile:    40px;
  --text-name:           16px;

  /* Layout di componente */
  --nav-height-current:  var(--nav-height-mobile); /* @kind spacing */
  --nav-height-laptop:   72px; /* @kind spacing */
  --nav-height-tablet:   68px; /* @kind spacing */
  --nav-height-mobile:   64px; /* @kind spacing */
  --nav-scroll-threshold: 24; /* @kind other */
  --hero-height:         min(88vh, 880px); /* @kind spacing */
  --hero-min-height:     640px; /* @kind spacing */
  --hero-height-laptop:  min(84vh, 760px); /* @kind spacing */
  --hero-min-height-tablet: 560px; /* @kind spacing */
  --grid-columns:        4; /* @kind other */
  --cookie-max-height:   35vh; /* @kind spacing */
  --scroll-card-width:   82%; /* @kind spacing */
  --hero-image-width-tablet: 70%; /* @kind spacing */
  --blur-nav:            14px; /* @kind spacing */
  --opacity-disabled:    0.45; /* @kind other */
  --btn-padding-x:       calc(var(--spacing-md) + var(--spacing-3xs)); /* @kind spacing */

  /* Motion di componente */
  --duration-panel:      400ms; /* @kind other */
  --duration-image:      1200ms; /* @kind other */
  --stagger-hero:        90ms; /* @kind other */
  --shift-arrow:         4px; /* @kind spacing */
  --shift-row:           8px; /* @kind spacing */
  --lift-card:           -2px; /* @kind spacing */
  --press-offset:        1px; /* @kind spacing */
  --scale-image-reveal:  1.04; /* @kind other */
  --scale-image-hover:   1.03; /* @kind other */
  --parallax-max:        24px; /* @kind spacing */
  --rotate-close:        45deg; /* @kind other */
  --rotate-chevron:      180deg; /* @kind other */

  /* Livelli */
  --z-nav:     100; /* @kind other */
  --z-submenu: 110; /* @kind other */
  --z-cookie:  150; /* @kind other */
  --z-menu:    200; /* @kind other */

  /* Texture (SVG inline, nessuna richiesta di rete) */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.19 0 0 0 0 0.17 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* @kind other */
}

/* =====================================================================
   D. BREAKPOINT — mobile first. I media query sono l'unico punto in cui
   compaiono px letterali: var() non è ammesso lì.
   ===================================================================== */
@media (min-width: 640px) {
  :root {
    --grid-columns: 8; /* @kind other */
    --nav-height-current: var(--nav-height-tablet);
  }
}
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12; /* @kind other */
    --nav-height-current: var(--nav-height-laptop);
  }
}
@media (min-width: 1440px) {
  :root {
    --nav-height-current: var(--nav-height);
  }
}

/* =====================================================================
   E. MOVIMENTO RIDOTTO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-base:  1ms; /* @kind other */
    --duration-slow:  150ms; /* @kind other */
    --duration-hero:  150ms; /* @kind other */
    --duration-count: 1ms; /* @kind other */
    --reveal-distance: 0px; /* @kind spacing */
    --stagger-step: 0ms; /* @kind other */
    --duration-panel: 1ms; /* @kind other */
    --duration-image: 150ms; /* @kind other */
    --stagger-hero: 0ms; /* @kind other */
    --shift-arrow: 0px; /* @kind spacing */
    --shift-row: 0px; /* @kind spacing */
    --lift-card: 0px; /* @kind spacing */
    --press-offset: 0px; /* @kind spacing */
    --scale-image-reveal: 1; /* @kind other */
    --scale-image-hover: 1; /* @kind other */
  }
}