/* ================================================================
   KUHN ELEGANTE — DESIGN TOKENS v1.0
   Enqueued prima di assets/main.css.
   I colori semantici (--brand, --ink, ecc.) sono sovrascrivibili
   via ACF + wp_head (kuhn_color_overrides).
   I font (--font-display, --font-body) vengono sovrascritta
   da kuhn_font_vars() in wp_head.
   ================================================================ */

:root {

  /* ----------------------------------------------------------------
     PRIMITIVI — Scala cromatica
     ---------------------------------------------------------------- */

  /* Blu navy (brand Kuhn) */
  --blue-950: #00111f;
  --blue-900: #001a38;
  --blue-800: #002b54;   /* brand */
  --blue-700: #0a3d6e;
  --blue-600: #1a5490;   /* brand-em */
  --blue-500: #2a6bab;
  --blue-400: #4a85c5;
  --blue-300: #7aabd9;
  --blue-200: #b3d0eb;
  --blue-100: #dceef7;
  --blue-50:  #f0f7fc;

  /* Neutri */
  --neutral-950: #090909;
  --neutral-900: #111111;   /* ink */
  --neutral-800: #1c1c1c;
  --neutral-700: #333333;
  --neutral-600: #6b6b6b;   /* grey */
  --neutral-500: #8a8a8a;
  --neutral-400: #a8a8a8;
  --neutral-300: #c8cdd4;
  --neutral-200: #dde3ea;   /* line */
  --neutral-100: #f0f3f7;   /* sand */
  --neutral-50:  #f8f9fb;
  --neutral-0:   #ffffff;   /* white */

  /* ----------------------------------------------------------------
     SEMANTICI — Token di colore con alias retrocompat
     Gli alias (--brand, --ink, ecc.) vengono sovrascrivibili
     da kuhn_color_overrides() per varianti per cliente.
     ---------------------------------------------------------------- */

  --color-brand:     var(--blue-800);
  --color-brand-em:  var(--blue-600);
  --color-brand-dim: var(--blue-900);
  --color-ink:       var(--neutral-900);
  --color-grey:      var(--neutral-600);
  --color-line:      var(--neutral-200);
  --color-sand:      var(--neutral-100);
  --color-white:     var(--neutral-0);

  /* Alias retrocompat — usati in tutto main.css */
  --brand:    var(--blue-800);
  --brand-em: var(--blue-600);
  --ink:      var(--neutral-900);
  --grey:     var(--neutral-600);
  --line:     var(--neutral-200);
  --sand:     var(--neutral-100);
  --white:    var(--neutral-0);

  /* ----------------------------------------------------------------
     TIPOGRAFIA
     Font families: fallback qui, override definitivo via wp_head
     ---------------------------------------------------------------- */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Scale tipografica — fluid type */
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   clamp(20px, 1.8vw, 26px);
  --text-xl:   clamp(24px, 2.2vw, 32px);
  --text-2xl:  clamp(28px, 3vw, 42px);
  --text-3xl:  clamp(34px, 4vw, 52px);
  --text-4xl:  clamp(40px, 5vw, 68px);
  --text-hero: clamp(44px, 5.5vw, 76px);

  /* Letter spacing */
  --ls-tight:   -.02em;
  --ls-normal:  0;
  --ls-wide:    .1em;
  --ls-wider:   .18em;
  --ls-label:   .22em;
  --ls-widest:  .32em;
  --ls-brand:   .42em;

  /* Line height */
  --lh-tight:    1.08;
  --lh-snug:     1.2;
  --lh-heading:  1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;
  --lh-loose:    1.85;
  --lh-spacious: 1.9;

  /* ----------------------------------------------------------------
     SPACING — multipli di 4 px
     ---------------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* Layout semantici */
  --gap-tile:       3px;     /* fughe tra tessere — tratto grafico identitario */
  --gap-card:       30px;
  --pad-page:       50px;    /* padding orizzontale desktop */
  --pad-page-mobile: 20px;
  --pad-section:    130px;   /* padding verticale sezioni */
  --pad-section-sm: 80px;
  --max-wide:       1500px;
  --max-content:    1100px;
  --max-text:       860px;
  --max-narrow:     700px;

  /* ----------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------- */

  /* Easing */
  --ease-smooth: cubic-bezier(.2,.6,.2,1);    /* hover standard */
  --ease-out:    cubic-bezier(.16,1,.3,1);    /* reveal/enter */
  --ease-in:     cubic-bezier(.4,0,.8,.4);    /* exit */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* micro-rimbalzo */

  /* Durate */
  --dur-micro:  150ms;
  --dur-fast:   200ms;
  --dur-normal: 300ms;
  --dur-slow:   600ms;
  --dur-zoom:   1200ms;   /* hero image zoom */
  --dur-reveal: 18000ms;  /* slowzoom hero */

  /* Transizioni semantiche */
  --trans-micro:  var(--dur-micro)  var(--ease-out);
  --trans-hover:  var(--dur-normal) var(--ease-smooth);
  --trans-enter:  var(--dur-slow)   var(--ease-out);
  --trans-zoom:   var(--dur-zoom)   var(--ease-smooth);

  /* ----------------------------------------------------------------
     OMBRE
     ---------------------------------------------------------------- */

  --shadow-sm:   0 1px 3px rgba(0,0,0,.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.08);
  --shadow-xl:   0 20px 60px rgba(0,0,0,.12);
  --shadow-nav:  0 8px 24px rgba(0,0,0,.08);
  --shadow-card: 0 2px 8px rgba(0,43,84,.06);

  /* ----------------------------------------------------------------
     BORDI E RADIUS
     Il tema usa radius 0 (stile sartoriale netto).
     Valori sm/md disponibili per casi speciali (input, badge).
     ---------------------------------------------------------------- */

  --radius-0:  0;
  --radius-sm: 2px;
  --radius-md: 4px;

  --border-hair:  1px solid var(--line);
  --border-brand: 1px solid var(--brand);
  --border-white: 1px solid rgba(255,255,255,.2);

  /* ----------------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   50;
  --z-header:   100;
  --z-overlay:  150;
  --z-modal:    200;
  --z-toast:    300;
}