/*
 * ═══════════════════════════════════════════════════════
 *  WAVE DIGITAL — CONFIG.CSS
 *  Design tokens: colors, typography, spacing, easings
 *  Edit here to retheme the entire site
 * ═══════════════════════════════════════════════════════
 */

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

/* ─── BOOTSTRAP 5 ─── */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');

/* ─── FONT AWESOME 6 ─── */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {

  /* ── BACKGROUND PALETTE ── */
  --bg:           #13151A;   /* body bg — darkest */
  --bg2:          #1C1F27;   /* section alternate */
  --bg3:          #252930;   /* cards, inputs */
  --bg-light:     #F0F4FA;   /* light sections (Chi siamo) */
  --bg-light2:    #E8EDF6;   /* light section alternate */
  --mid:          #353A45;   /* borders, dividers */
  --muted:        #636878;   /* muted text, icons */

  /* ── TEXT PALETTE ── */
  --light:        #E4E8F0;   /* body text on dark */
  --white:        #F0F3F8;   /* near-white text */
  --pure:         #FFFFFF;   /* pure white */
  --text-dark:    #13151A;   /* body text on light bg */
  --text-mid:     #353A45;   /* secondary text on light */

  /* ── BRAND BLUE ── */
  --blue:         #2563EB;   /* primary brand blue */
  --blue-b:       #3B82F6;   /* medium blue */
  --blue-g:       #60A5FA;   /* light blue / accent */
  --blue-dark:    #1D4ED8;   /* darker blue — hover states */
  --blue-xdark:   #1E40AF;   /* deepest blue */
  --blue-pale:    #DBEAFE;   /* very light blue fill */
  --blue-ghost:   #EFF6FF;   /* ghost blue bg */

  /* ── SEMANTIC COLORS ── */
  --success:      #16A34A;
  --warning:      #D97706;
  --danger:       #DC2626;
  --info:         #0EA5E9;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Bebas Neue', sans-serif;    /* hero titles, large headings */
  --font-heading: 'Manrope', sans-serif;        /* section headings, labels */
  --font-body:    'DM Sans', sans-serif;        /* body text, UI */

  --fs-xs:        0.72rem;    /* 11.5px */
  --fs-sm:        0.82rem;    /* 13px   */
  --fs-base:      1rem;       /* 16px   */
  --fs-md:        1.06rem;    /* 17px   */
  --fs-lg:        1.25rem;    /* 20px   */
  --fs-xl:        1.5rem;     /* 24px   */
  --fs-2xl:       2rem;       /* 32px   */
  --fs-3xl:       3rem;       /* 48px   */
  --fs-hero:      clamp(3.5rem, 9vw, 9rem);
  --fs-display:   clamp(2.5rem, 6vw, 6rem);
  --fs-title:     clamp(2rem, 4vw, 4rem);

  --lh-tight:     0.9;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.68;
  --lh-loose:     1.9;

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

  /* ── LETTER SPACING ── */
  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.06em;
  --ls-wider:     0.12em;
  --ls-widest:    0.18em;

  /* ── SPACING SCALE ── */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px*/

  /* ── BORDER RADIUS ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.18);
  --shadow-md:  0 8px 32px rgba(0,0,0,.28);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.38);
  --shadow-blue: 0 0 40px rgba(37,99,235,.25);
  --shadow-blue-lg: 0 20px 60px rgba(37,99,235,.3);

  /* ── BORDERS ── */
  --border:       1px solid rgba(255,255,255,.07);
  --border-mid:   1px solid rgba(255,255,255,.12);
  --border-blue:  1px solid rgba(59,130,246,.28);
  --border-light: 1px solid rgba(37,99,235,.15);

  /* ── EASINGS ── */
  --ease:   cubic-bezier(.16,1,.3,1);    /* expressive spring */
  --ease2:  cubic-bezier(.4,0,.2,1);     /* material standard */
  --ease3:  cubic-bezier(.25,.46,.45,.94); /* ease-out-quad */

  /* ── TRANSITIONS ── */
  --t-fast:   .15s;
  --t-base:   .25s;
  --t-slow:   .4s;
  --t-slower: .7s;

  /* ── Z-INDEX ── */
  --z-below:  -1;
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 999;
  --z-menu:    1000;
  --z-modal:   1001;
  --z-toast:   2000;

  /* ── LAYOUT ── */
  --container-max: 1320px;
  --container-pad: clamp(1.5rem, 5vw, 5rem);
  --nav-h: 64px;
  --section-py: clamp(5rem, 10vw, 9rem);
}

/* ─── BOOTSTRAP OVERRIDES — align Bootstrap to Wave palette ─── */
.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-xdark);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-full);
}

.btn-outline-primary {
  --bs-btn-color: var(--blue-g);
  --bs-btn-border-color: var(--blue-g);
  --bs-btn-hover-bg: var(--blue);
  --bs-btn-hover-color: white;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-full);
}