/* ==========================================================================
   Design tokens — The Sky Walker
   Fonte di verità: SW_DESIGN_SYSTEM.md (estratto da theskywalker.eu).
   Non introdurre qui colori, raggi o ombre che non esistano in quel file.
   ========================================================================== */

:root {
  /* ---------- Brand / Accent ---------- */
  --color-accent:            #0f497a;
  --color-accent-hover:      #023c6d;
  --color-accent-600:        #04467e;
  --color-accent-500:        #054c88;
  --color-accent-400:        #11538b;
  --color-accent-300:        #125995;
  --color-accent-900:        #003061;

  /* ---------- Superfici (dark-first) ---------- */
  --surface-base:            #141618;
  --surface-raised:          #1b1d1f;
  --surface-sunken:          #101213;
  --surface-deep:            #0e1012;
  --surface-black:           #030506;
  --surface-elevated:        #303133;
  --surface-muted:           #232426;
  --surface-inverse:         #ffffff;

  /* ---------- Neutrali ---------- */
  --neutral-50:              #f7f7f7;
  --neutral-100:             #f2f2f2;
  --neutral-200:             #eaeaea;
  --neutral-300:             #dddddd;
  --neutral-400:             #d0d0d0;
  --neutral-500:             #cccccc;
  --neutral-600:             #7a7d82;
  --neutral-700:             #777777;
  --neutral-800:             #6a6a6a;

  /* ---------- Testo ---------- */
  --text-on-dark:            #ffffff;
  --text-on-light:           #303133;
  --text-accent:             #0f497a;
  --text-muted:              rgba(48, 49, 51, 0.5);
  --text-black:              #000000;

  /* ---------- Palette estesa (accenti tematici, mai colore di interfaccia) --- */
  --color-cyan:   #0cb4ce;  --color-cyan-hover:   #00a7c1;
  --color-blue:   #006cff;  --color-blue-hover:   #005ff2;
  --color-violet: #6442ff;  --color-violet-hover: #5735f2;
  --color-green:  #43cb83;  --color-green-hover:  #36be76;
  --color-red:    #c92228;  --color-red-hover:    #bc151b;
  --color-pink:   #e9168c;  --color-pink-hover:   #dc097f;
  --color-yellow: #ffea01;  --color-yellow-hover: #f2dd00;
  --color-gold:   #b4975a;  --color-gold-hover:   #a78a4d;
  --color-success: #28de72; --color-warning: #ffc42e; --color-danger: #ff3100;

  /* ---------- Tipografia ---------- */
  --font-ui:      'Poppins', sans-serif;
  --font-body:    'Roboto', sans-serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  29px;
  --text-3xl:  35px;
  --text-4xl:  50px;

  --leading-tight:  1.2;
  --leading-body:   1.75;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-btn:  1.2px;
  --tracking-nav:  0.6px;

  /* ---------- Layout ---------- */
  --container-max:   1296px;
  --gutter:          36px;
  --section-py:      144px;
  --logo-py:         27px;

  /* ---------- Spacing scale (ritmo 9/18/27/36) ---------- */
  --space-1: 9px;  --space-2: 18px; --space-3: 27px; --space-4: 36px;
  --space-5: 54px; --space-6: 72px; --space-7: 108px; --space-8: 144px;

  /* ---------- Forme ---------- */
  --radius-sm:   2px;
  --radius-md:   5px;
  --radius-lg:   12px;
  --radius-pill: 750px;
  --radius-full: 50%;

  --border-width: 1px;

  --shadow-input:  inset 0 2px 1px rgba(0, 0, 0, 0.024);
  --shadow-soft:   0 0 14px rgba(0, 0, 0, 0.1);
  --shadow-focus:  0 0 0 2px rgba(0, 0, 0, 0.2);
  --shadow-drop:   0 4px 10px -10px rgba(0, 0, 0, 0.6);

  /* ---------- Derivati per il funnel (mobile-first) ----------
     Sotto 960px il tema riduce i display type di 0.667; le sezioni
     respirano meno perché il traffico è quasi tutto da smartphone. */
  --section-py-mobile: var(--space-5);   /* 54px */
  --hero-size:         33.333px;         /* 50px sopra 960px */
  --container-pad:     var(--space-2);   /* 18px, 36px sopra 960px */
}

@media (min-width: 960px) {
  :root {
    --section-py-mobile: var(--section-py);
    --hero-size:         var(--text-4xl);
    --container-pad:     var(--gutter);
  }
}