/* ============================================================
   Baseclip — Design System condiviso (theme.css)
   Token + base comuni a TUTTE le pagine (home, app, dashboard).
   Le pagine importano questo file e poi il loro CSS specifico.
   Look & feel: premium, chiaro, morbido. Spina dorsale indaco,
   superfici pastello, ombre soffici. Riferimento: CRM "soft".
   ============================================================ */

:root{
  /* --- Brand (indaco) --- */
  --brand:#4f46e5;
  --brand-2:#6366f1;
  --brand-700:#4338ca;
  --brand-ink:#312e81;
  --brand-soft:#eeeffe;
  --brand-tint:#e4e4fb;

  /* --- Accento caldo (coral), a piccole dosi --- */
  --warm:#e0613a;
  --warm-soft:#fcece4;

  /* --- Superfici pastello (card "morbide") --- */
  --lilac:#eeedfb;   --lilac-2:#ddd9f6;  --lilac-ink:#5b51d8;
  --peach:#fcebe3;   --peach-2:#f7d6c7;  --peach-ink:#d65f39;
  --sky:#e9f1fc;     --sky-2:#d3e5f8;    --sky-ink:#2f74c8;
  --mint:#e6f4ec;    --mint-2:#cfe8da;   --mint-ink:#1f9a62;

  /* --- Neutri (leggermente tintati a freddo) --- */
  --ink:#15161d;
  --muted:#5a6172;
  --faint:#717988;
  --line:#e9e7f3;
  --line-2:#f0eef8;
  --bg:#fdfdff;
  --surface:#ffffff;
  --soft:#f5f5fb;
  --soft-2:#efeff8;
  --placeholder:#828a99;

  /* --- Semantici --- */
  --wa:#25d366;       --wa-ink:#06351f;
  --ok:#15803d;       --ok-soft:#e9f8ef;   --ok-line:#bfead0;
  --err:#c0362c;      --err-soft:#fdeeed;  --err-line:#f3cbc8;

  /* --- Raggi --- */
  --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:30px; --r-pill:999px;

  /* --- Ombre (soffici, diffuse, tintate indaco) --- */
  --shadow-sm:0 2px 10px rgba(35,33,75,.05);
  --shadow:0 16px 36px -18px rgba(45,40,95,.22);
  --shadow-lg:0 34px 64px -26px rgba(45,40,95,.30);
  --shadow-brand:0 18px 38px -14px rgba(79,70,229,.42);

  /* --- Ritmo / layout --- */
  --pad-section:clamp(64px,9vw,104px);
  --maxw:1160px;

  /* --- Tipografia --- */
  --display:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.07; margin:0}
h1{font-weight:800}
p{margin:0}
a{color:inherit}
img,svg{display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---------- bottoni (condivisi) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:16px; line-height:1; cursor:pointer;
  padding:15px 26px; border-radius:var(--r-sm); border:1px solid transparent; text-decoration:none;
  transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--brand-700); transform:translateY(-2px); box-shadow:0 22px 42px -14px rgba(79,70,229,.5)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#d4d2e6; transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-wa{background:var(--wa); color:var(--wa-ink)}
.btn-wa:hover{background:#1ec15c; transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(37,211,102,.5)}
.btn-lg{font-size:17px; padding:17px 30px}
.btn-sm{padding:11px 18px; font-size:15px}

/* ---------- campi form (condivisi) ---------- */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field label{font-size:14px; font-weight:600; color:#2a2f3a}
.field label .opt{color:var(--faint); font-weight:500}
.field input,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--surface);
  border:1px solid #d7d5e6; border-radius:var(--r-sm); padding:13px 14px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.field textarea{resize:vertical; min-height:92px}

/* ---------- utility condivise ---------- */
.live{position:relative; width:9px; height:9px; border-radius:50%; background:var(--wa); flex:none}
.live::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(37,211,102,.4); animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.6); opacity:.9} 80%,100%{transform:scale(1.5); opacity:0}}

html.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
html.js [data-reveal].in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}

:focus-visible{outline:3px solid rgba(79,70,229,.5); outline-offset:2px; border-radius:6px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none}
}