/* ============================================================
   tokens.css — Design tokens (single source of truth)
   Narramondo Viaggi · template landing viaggi/crociere
   Tema: LIGHT (parchment/white) · accenti #149aa3 (mare) / #c98a14 (sole)
   Tipografia: UN solo family (Manrope), usato con decisione.
   ============================================================ */

:root {
  /* —— Palette grezza —————————————————————————————————————— */
  --c-navy-900: #0c1729;
  --c-navy-800: #11203a;
  --c-navy-700: #1a2b48;   /* brand navy → usato come inchiostro profondo */
  --c-navy-600: #24395e;
  --c-navy-500: #33507e;

  --c-teal:      #38cfd6;  /* accento brand — il mare (vivido) */
  --c-teal-soft: #7fe3e8;
  --c-teal-deep: #0f8e97;  /* teal leggibile su fondo chiaro */

  --c-gold:      #f5b840;  /* accento brand — il sole/bussola */
  --c-gold-soft: #ffd685;
  --c-gold-deep: #b9810f;  /* oro leggibile su fondo chiaro (testo) */

  --c-paper:    #fbf7ef;   /* parchment caldo — canvas pagina */
  --c-paper-2:  #f2ead9;   /* parchment più carico — fasce/alternanze */
  --c-cloud:    #ffffff;   /* superficie card */
  --c-ink:      #14233f;   /* testo su fondo chiaro */
  --c-ink-soft: #4a5a76;   /* testo secondario */
  --c-ink-faint:#8493ab;   /* testo terziario / hint */

  /* —— Ruoli semantici (LIGHT) ———————————————————————————— */
  --bg:          var(--c-paper);
  --surface:     var(--c-cloud);
  --surface-2:   var(--c-paper-2);
  --text:        var(--c-ink);
  --text-dim:    var(--c-ink-soft);
  --text-faint:  var(--c-ink-faint);
  --accent:      var(--c-teal-deep);   /* accento leggibile (link, eyebrow) */
  --accent-gold: var(--c-gold-deep);   /* accento oro leggibile (testo) */
  --line:        color-mix(in srgb, var(--c-ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--c-ink) 22%, transparent);

  /* —— Tipografia (single family) ————————————————————————— */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Alias storici: puntano allo stesso font (niente più serif/sans alternati) */
  --font-body:    var(--font);
  --font-display: var(--font);

  /* Floor di leggibilità: niente testo sotto i 15px (compromesso).
     Base body 18px. Le chip (badge) fanno eccezione a 0.92rem. */
  --fs-min: 0.9375rem;   /* 15px @root 16px */

  /* Scala tipografica fluida (clamp: min, fluid, max) */
  --fs-eyebrow: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --fs-body:    clamp(1.125rem, 1.04rem + 0.4vw, 1.28rem);
  --fs-lead:    clamp(1.12rem, 1rem + 0.55vw, 1.42rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  --fs-display: clamp(2.5rem, 1.6rem + 4.6vw, 5.2rem);

  --lh-tight:  1.06;
  --lh-snug:   1.2;
  --lh-body:   1.62;

  --tracking-eyebrow: 0.26em;
  --tracking-tight:  -0.025em;   /* heading sans → un filo negativo = premium */

  /* —— Spazi & ritmo ——————————————————————————————————————— */
  --space-section: clamp(4.5rem, 3rem + 8vw, 9rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --maxw:          1180px;
  --maxw-prose:    62ch;

  /* —— Raggi ————————————————————————————————————————————— */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* —— Elevazione (ombre per fondo CHIARO) ———————————————— */
  --shadow-sm: 0 1px 2px rgba(20,35,63,0.06), 0 2px 8px -2px rgba(20,35,63,0.10);
  --shadow-md: 0 10px 28px -14px rgba(20,35,63,0.28);
  --shadow-lg: 0 30px 60px -26px rgba(20,35,63,0.35);
  --glow-gold: 0 10px 30px -12px color-mix(in srgb, var(--c-gold) 70%, transparent);
  --glow-teal: 0 10px 30px -12px color-mix(in srgb, var(--c-teal) 55%, transparent);

  /* —— Motion ———————————————————————————————————————————— */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t-med:  0.4s;
  --t-slow: 0.8s;
}