/* ════════════════════════════════════════════════════════════════════════
   LIVEIN DESIGN TOKENS — v1.0
   Single source of truth per palette, typography, spacing, motion.
   Caricato PRIMO nel head, prima di qualsiasi altro CSS.
   ════════════════════════════════════════════════════════════════════════ */

:root{

  /* ── COLOR · NAVY (brand primary) ── */
  --li-navy-50:  #f3f6fa;
  --li-navy-100: #e3ebf3;
  --li-navy-200: #c7d6e7;
  --li-navy-300: #9fb6d1;
  --li-navy-400: #6e8caf;
  --li-navy-500: #486a92;
  --li-navy-600: #355478;
  --li-navy-700: #1f3c5e;
  --li-navy-800: #1A2E44;   /* legacy alias --livein-navy */
  --li-navy-900: #0e1d2e;
  --li-navy-950: #060e18;

  /* ── COLOR · SUNSET (accent) ── */
  --li-sunset-50:  #fff5ed;
  --li-sunset-100: #ffe8d4;
  --li-sunset-200: #ffcca6;
  --li-sunset-300: #ffa66d;
  --li-sunset-400: #ff8642;
  --li-sunset-500: #FF6B35;  /* legacy alias --livein-sunset */
  --li-sunset-600: #ef4d18;
  --li-sunset-700: #c63a13;
  --li-sunset-800: #9c2f15;
  --li-sunset-900: #7a2814;
  --li-sunset-950: #421008;

  /* ── COLOR · SAND (neutrals warm) ── */
  --li-sand-50:  #faf8f5;
  --li-sand-100: #f3eee5;
  --li-sand-200: #e8ddc8;
  --li-sand-300: #d9c8a5;
  --li-sand-400: #c2a87b;
  --li-sand-500: #ad8c5a;
  --li-sand-600: #8a6d44;

  /* ── COLOR · INK (text neutrals) ── */
  --li-ink-50:  #f5f6f8;
  --li-ink-100: #e9ecf0;
  --li-ink-200: #cdd3dc;
  --li-ink-300: #a4adba;
  --li-ink-400: #707c8b;
  --li-ink-500: #4d5868;
  --li-ink-600: #343d4b;
  --li-ink-700: #232a35;
  --li-ink-800: #161b23;
  --li-ink-900: #0a0e14;

  /* ── COLOR · STATE ── */
  --li-success: #1f7a3a;
  --li-warning: #b15c10;
  --li-danger:  #b3261e;
  --li-info:    #0b5cad;

  /* ── COLOR · SEMANTIC TOKENS (use these in components) ── */
  --li-bg:           var(--li-sand-50);
  --li-bg-alt:       #ffffff;
  --li-surface:      #ffffff;
  --li-surface-alt:  var(--li-sand-100);
  --li-text:         var(--li-ink-900);
  --li-text-mute:    var(--li-ink-500);
  --li-text-soft:    var(--li-ink-400);
  --li-text-invert:  #ffffff;
  --li-border:       rgba(10,14,20,.08);
  --li-border-strong:rgba(10,14,20,.18);
  --li-primary:      var(--li-sunset-500);
  --li-primary-hover:var(--li-sunset-600);
  --li-primary-ink:  #ffffff;
  --li-accent:       var(--li-navy-800);
  --li-accent-hover: var(--li-navy-900);

  /* ── TYPOGRAPHY · families ── */
  /* Display: serif editoriale per H1/H2 grandi (system stack premium, no Google) */
  --li-font-display: "GT Sectra","Tiempos Headline","Cormorant Garamond",
                     ui-serif,Georgia,"Times New Roman",Times,serif;
  /* Body: sans modern (system stack, niente Google Fonts) */
  --li-font-body: -apple-system,BlinkMacSystemFont,"Segoe UI Variable",
                  "Segoe UI","Helvetica Neue",Inter,system-ui,
                  ui-sans-serif,Arial,sans-serif;
  /* Mono: per numeri e badge */
  --li-font-mono: "JetBrains Mono","SF Mono",Menlo,Consolas,
                  "Liberation Mono",monospace;

  /* ── TYPOGRAPHY · scale (fluid clamp) ── */
  --li-text-2xs:  clamp(10px, .68rem, 11px);
  --li-text-xs:   clamp(11px, .76rem, 12px);
  --li-text-sm:   clamp(13px, .85rem, 14px);
  --li-text-base: clamp(15px, 1rem,    16px);
  --li-text-lg:   clamp(17px, 1.15rem, 18px);
  --li-text-xl:   clamp(19px, 1.32rem, 22px);
  --li-text-2xl:  clamp(22px, 1.65rem, 28px);
  --li-text-3xl:  clamp(28px, 2.25rem, 36px);
  --li-text-4xl:  clamp(34px, 3rem,    48px);
  --li-text-5xl:  clamp(42px, 4vw,     64px);
  --li-text-6xl:  clamp(54px, 5.5vw,   88px);
  --li-text-7xl:  clamp(68px, 7vw,     112px);

  /* ── TYPOGRAPHY · weight ── */
  --li-w-light:   300;
  --li-w-regular: 400;
  --li-w-medium:  500;
  --li-w-semi:    600;
  --li-w-bold:    700;
  --li-w-black:   900;

  /* ── TYPOGRAPHY · leading ── */
  --li-lh-tight:   1.05;
  --li-lh-snug:    1.2;
  --li-lh-base:    1.55;
  --li-lh-relaxed: 1.7;
  --li-lh-loose:   1.85;

  /* ── TYPOGRAPHY · tracking ── */
  --li-tr-tight: -.022em;
  --li-tr-base:  0;
  --li-tr-wide:  .04em;
  --li-tr-wider: .14em;

  /* ── SPACING · 8px grid ── */
  --li-sp-0:  0;
  --li-sp-1:  4px;
  --li-sp-2:  8px;
  --li-sp-3:  12px;
  --li-sp-4:  16px;
  --li-sp-5:  24px;
  --li-sp-6:  32px;
  --li-sp-7:  48px;
  --li-sp-8:  64px;
  --li-sp-9:  96px;
  --li-sp-10: 128px;
  --li-sp-11: 160px;
  --li-sp-12: 192px;

  /* ── LAYOUT ── */
  --li-content-max:   1320px;
  --li-content-narrow:880px;
  --li-content-text:  680px;
  --li-section-px:    clamp(20px, 5vw, 64px);
  --li-section-py:    clamp(56px, 9vw, 128px);
  --li-header-h:      clamp(80px, 8vw, 100px); /* logo grande! era 70px */

  /* ── RADIUS ── */
  --li-r-none: 0;
  --li-r-xs:   4px;
  --li-r-sm:   6px;
  --li-r:      10px;
  --li-r-lg:   16px;
  --li-r-xl:   24px;
  --li-r-2xl:  32px;
  --li-r-pill: 999px;

  /* ── SHADOW ── */
  --li-shadow-sm:  0 1px 2px rgba(10,14,20,.06),
                   0 1px 1px rgba(10,14,20,.03);
  --li-shadow:     0 4px 12px -2px rgba(10,14,20,.10),
                   0 2px 6px rgba(10,14,20,.06);
  --li-shadow-lg:  0 18px 40px -12px rgba(10,14,20,.18),
                   0 6px 16px rgba(10,14,20,.08);
  --li-shadow-xl:  0 32px 64px -16px rgba(10,14,20,.24),
                   0 12px 28px rgba(10,14,20,.10);
  --li-shadow-ring:0 0 0 4px rgba(255,107,53,.18);

  /* ── MOTION ── */
  --li-ease-out:    cubic-bezier(.2,.8,.2,1);
  --li-ease-in-out: cubic-bezier(.65,0,.35,1);
  --li-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --li-dur-fast:    180ms;
  --li-dur:         320ms;
  --li-dur-slow:    480ms;
  --li-dur-slower:  720ms;

  /* ── Z-INDEX ── */
  --li-z-base:    1;
  --li-z-sticky:  100;
  --li-z-header:  500;
  --li-z-overlay: 800;
  --li-z-modal:   1000;
  --li-z-fab:     1100;
  --li-z-toast:   1200;

  /* ── BREAKPOINTS (only as reference, used in @media) ── */
  /* sm:480 md:768 lg:1024 xl:1280 2xl:1536 */

  /* ── LEGACY ALIASES (preserve old code that uses --livein-*) ── */
  --livein-navy:    var(--li-navy-800);
  --livein-sunset:  var(--li-sunset-500);
  --livein-white:   #ffffff;
  --livein-bg-alt:  var(--li-bg);
  --livein-border:  var(--li-border);
  --livein-text:    var(--li-text);
  --livein-muted:   var(--li-text-mute);
  --font-heading:   var(--li-font-display);
  --font-body:      var(--li-font-body);
  --header-h:       var(--li-header-h);
  --content-max:    var(--li-content-max);
  --section-px:     var(--li-section-px);
}

/* ── DARK MODE (auto, light overrides for now) ── */
@media (prefers-color-scheme: dark){
  :root{
    /* Disabled: brand luxury preferisce skin chiaro consistente.
       Si attiva manualmente con .li-dark sul body se serve. */
  }
}

/* ── BASE RESET (minimal, non distruttivo) ── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--li-font-body);
  font-size:var(--li-text-base);
  line-height:var(--li-lh-base);
  color:var(--li-text);
  background:var(--li-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block }
button,input,textarea,select{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--li-primary); outline-offset:3px; border-radius:4px }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── UTILITY CLASSES (minimi, non Tailwind) ── */
.li-container{ max-width:var(--li-content-max); margin-inline:auto; padding-inline:var(--li-section-px) }
.li-narrow   { max-width:var(--li-content-narrow); margin-inline:auto; padding-inline:var(--li-section-px) }
.li-text-only{ max-width:var(--li-content-text); margin-inline:auto; padding-inline:var(--li-section-px) }
.li-section  { padding-block:var(--li-section-py) }
.li-section--alt{ background:var(--li-surface-alt) }
.li-section--dark{ background:var(--li-navy-800); color:var(--li-text-invert) }
.li-eyebrow{
  display:inline-block;
  font:var(--li-w-semi) var(--li-text-xs)/1.4 var(--li-font-body);
  letter-spacing:var(--li-tr-wider);
  text-transform:uppercase;
  color:var(--li-text-mute);
  margin-block-end:var(--li-sp-3);
}
.li-h1,.li-h2,.li-h3{ font-family:var(--li-font-display); color:var(--li-text); margin:0; text-wrap:balance }
.li-h1{ font:var(--li-w-bold) var(--li-text-6xl)/var(--li-lh-tight) var(--li-font-display); letter-spacing:var(--li-tr-tight) }
.li-h2{ font:var(--li-w-bold) var(--li-text-4xl)/var(--li-lh-snug) var(--li-font-display); letter-spacing:var(--li-tr-tight) }
.li-h3{ font:var(--li-w-semi) var(--li-text-2xl)/var(--li-lh-snug) var(--li-font-display) }
.li-lede{ font:var(--li-w-regular) var(--li-text-lg)/var(--li-lh-relaxed) var(--li-font-body); color:var(--li-text-mute); max-width:60ch; margin-inline:auto; text-wrap:pretty; text-align:center }
.li-section--dark,
.li-section--dark .li-h1,
.li-section--dark .li-h2,
.li-section--dark .li-h3,
.li-section--dark h1,
.li-section--dark h2,
.li-section--dark h3,
.li-section--dark h4,
.li-section--dark p,
.li-section--dark li,
.li-section--dark blockquote,
.li-section--dark cite,
.li-section--dark strong,
.li-section--dark span,
.li-section--dark div { color:#ffffff }
.li-section--dark .li-lede,
.li-section--dark p { color:rgba(255,255,255,.88) }
.li-section--dark .li-eyebrow { color:rgba(255,255,255,.72) }
.li-section--dark .li-em { color:var(--li-sunset-300) }
.li-section--dark a:not(.li-btn) { color:var(--li-sunset-300); text-decoration:underline }
.li-em{ font-style:italic; color:var(--li-primary); font-family:var(--li-font-display) }

/* Hide visually but keep accessible */
.li-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}