/* =========================================================================
   PGO — Concept "Outdoor moderno / dinamico"
   tokens.css — Design tokens (custom properties)
   Palette derivata dal logo PGO: rosso anello, verde collina,
   blu cielo/lago, giallo sole. Resa VIVA e satura, mood app escursionismo.
   ========================================================================= */

:root {
  /* ---- Brand core (saturi, energici) ---- */
  --c-green-600: #1f8f4e;   /* verde collina principale (brand) */
  --c-green-700: #166b3b;
  --c-green-500: #2fae63;
  --c-green-400: #57c882;   /* verde brillante accento */
  --c-green-050: #e9f7ee;

  --c-sky-600:  #1486c9;    /* blu cielo / lago */
  --c-sky-500:  #2aa0e0;
  --c-sky-400:  #5bbef0;
  --c-sky-050:  #e6f4fc;

  --c-sun-500:  #f5a623;    /* giallo/arancio sole — accento caldo CTA */
  --c-sun-400:  #ffbe3d;
  --c-red-500:  #e0392b;    /* rosso anello logo — usato con parsimonia */

  /* ---- Neutri ---- */
  --c-ink:      #142019;    /* testo principale, verdastro scuro */
  --c-ink-soft: #3a4a42;
  --c-muted:    #65766d;
  --c-line:     #dfe6e1;
  --c-surface:  #ffffff;
  --c-surface-2:#f4f8f5;    /* sfondo sezioni alternate */
  --c-surface-3:#eef3ef;

  /* ---- Semantici ---- */
  --c-bg:        var(--c-surface);
  --c-text:      var(--c-ink);
  --c-text-soft: var(--c-ink-soft);
  --c-brand:     var(--c-green-600);
  --c-brand-2:   var(--c-sky-600);
  --c-accent:    var(--c-sun-500);
  --c-on-brand:  #ffffff;

  /* ---- Gradienti d'impatto ---- */
  --grad-hero-veil: linear-gradient(
      180deg,
      rgba(10, 30, 20, 0.10) 0%,
      rgba(10, 30, 20, 0.10) 38%,
      rgba(8, 26, 18, 0.62) 78%,
      rgba(6, 22, 15, 0.86) 100%);
  --grad-brand: linear-gradient(120deg, var(--c-green-600) 0%, var(--c-sky-600) 100%);
  --grad-sun:   linear-gradient(120deg, var(--c-sun-500) 0%, var(--c-sun-400) 100%);

  /* ---- Tipografia ---- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", var(--font-sans);

  /* Type fluido (mobile-first, clamp) */
  --fs-300: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --fs-400: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-500: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-600: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --fs-700: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  --fs-800: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem);
  --fs-900: clamp(2.7rem, 1.7rem + 4.8vw, 4.8rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.62;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ---- Spaziatura (scala) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* ---- Layout ---- */
  --header-h: 80px;   /* altezza header sticky, scontata dal full-screen hero */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);

  /* ---- Raggi (card arrotondate, mood app) ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Ombre morbide ---- */
  --sh-sm: 0 1px 2px rgba(16, 40, 28, 0.06), 0 2px 6px rgba(16, 40, 28, 0.05);
  --sh-md: 0 6px 18px rgba(16, 40, 28, 0.09), 0 2px 6px rgba(16, 40, 28, 0.06);
  --sh-lg: 0 18px 44px rgba(16, 40, 28, 0.16), 0 6px 14px rgba(16, 40, 28, 0.08);
  --sh-brand: 0 12px 28px rgba(31, 143, 78, 0.32);
  --sh-sun: 0 12px 26px rgba(245, 166, 35, 0.36);

  /* ---- Transizioni / motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 620ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
}