/* =========================================================================
   Fatturbo — Design system (token unici + componenti base)
   Usato da: index.html (landing), login.html, e i token sono replicati
   identici dentro fatture/web_assets.py (app /app). Se cambi un token qui,
   aggiornalo anche là.
   Font: Inter caricato via <link> nelle pagine (non con @import, per perf).
   ========================================================================= */

:root{
  /* ---- Brand & gradienti ------------------------------------------------ */
  --brand-400:#e879f9;
  --brand-500:#d946ef;
  --brand-600:#c026d3;
  --brand-700:#a21caf;
  --violet-500:#ec4899;
  --violet-600:#db2777;
  --grad-brand:linear-gradient(135deg,#d946ef 0%,#ec4899 100%);
  --grad-cta:linear-gradient(135deg,#c026d3 0%,#db2777 100%);
  /* mesh dell'hero: rosa -> lavanda -> azzurro che sfuma nel bianco */
  --hero-mesh:
    radial-gradient(60% 55% at 12% 8%,  rgba(252,231,243,.85) 0%, rgba(252,231,243,0) 60%),
    radial-gradient(55% 50% at 88% 4%,  rgba(250,232,255,.85) 0%, rgba(250,232,255,0) 60%),
    radial-gradient(70% 60% at 50% 0%,  rgba(245,208,254,.80) 0%, rgba(245,208,254,0) 65%),
    #ffffff;

  /* ---- Superfici & testo ------------------------------------------------ */
  --surface:#ffffff;
  --surface-alt:#f8fafc;
  --border:#e5e7eb;
  --border-soft:#eef1f5;
  --ink:#0f172a;          /* titoli */
  --body:#475569;         /* corpo */
  --muted:#94a3b8;        /* attenuato */
  --success:#22c55e;

  /* ---- Sezione scura ---------------------------------------------------- */
  --dark-bg:#0b0b14;
  --dark-card:#15151f;
  --dark-border:rgba(255,255,255,.08);
  --dark-text:#c7c9d9;
  --dark-muted:#8b8da3;

  /* ---- Raggi ------------------------------------------------------------ */
  --r-sm:10px;
  --r-md:12px;            /* bottoni */
  --r-lg:16px;
  --r-xl:20px;
  --r-2xl:24px;
  --r-full:9999px;

  /* ---- Ombre & focus ---------------------------------------------------- */
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow-card:0 10px 30px rgba(15,23,42,.06);
  --shadow-lift:0 16px 40px rgba(15,23,42,.12);
  --ring-focus:0 0 0 3px rgba(217,70,239,.35);

  /* ---- Tipografia ------------------------------------------------------- */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-h1:clamp(40px,6vw,60px);
  --fs-h2:clamp(28px,4vw,40px);
  --fs-h3:20px;
  --fs-body:17px;
  --lh:1.6;
  --tracking:-0.02em;

  /* ---- Layout ----------------------------------------------------------- */
  --maxw:1200px;
  --gutter:24px;
  --section-y:clamp(64px,9vw,112px);
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh);
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:800;
  letter-spacing:var(--tracking);
  line-height:1.12;
  margin:0 0 .4em;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3}
p{margin:0 0 1em}

/* =========================================================================
   Layout
   ========================================================================= */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--dark-bg);color:var(--dark-text)}
.section--dark h2,.section--dark h3{color:#fff}

.section-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.section-head p{font-size:18px;color:var(--body)}
.section--dark .section-head p{color:var(--dark-text)}

/* =========================================================================
   Componenti
   ========================================================================= */

/* Eyebrow / badge sopra ai titoli */
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--brand-600);
  background:rgba(217,70,239,.10);
  border:1px solid rgba(217,70,239,.18);
  padding:5px 12px;border-radius:var(--r-full);
  margin-bottom:18px;
}
.section--dark .eyebrow{
  color:#f5d0fe;background:rgba(232,121,249,.14);border-color:rgba(232,121,249,.26);
}

/* Parole-chiave colorate nei titoli */
.title-grad{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Bottoni */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1;
  padding:13px 22px;border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{color:#fff;background:var(--grad-brand);box-shadow:0 6px 18px rgba(217,70,239,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(217,70,239,.40)}
.btn-ghost{color:var(--ink);background:#fff;border-color:var(--border)}
.btn-ghost:hover{transform:translateY(-2px);border-color:#cdd3db;box-shadow:var(--shadow-sm)}
.btn-light{color:var(--brand-600);background:#fff}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.btn-block{width:100%}
.btn-lg{padding:16px 28px;font-size:16px}

/* Card */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-card);
  padding:26px;
}
.card-hover{transition:transform .2s ease,box-shadow .2s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.section--dark .card{background:var(--dark-card);border-color:var(--dark-border)}

/* Pill / chip */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;
  padding:5px 12px;border-radius:var(--r-full);
  background:var(--surface-alt);border:1px solid var(--border);color:var(--body);
}
.section--dark .pill{background:rgba(255,255,255,.05);border-color:var(--dark-border);color:var(--dark-text)}

/* Pallino "successo" / voce checklist */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.check .mark{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--success);
  font-size:13px;font-weight:700;margin-top:1px;
}

/* Logo */
.logo-img{height:42px;width:auto;display:block;max-width:100%}
.logo-img--light{filter:brightness(0) invert(1)}

/* =========================================================================
   Accessibilità & motion
   ========================================================================= */
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:6px}
.btn:focus-visible{box-shadow:var(--ring-focus),0 6px 18px rgba(217,70,239,.30)}

/* reveal allo scroll (lo attiva un piccolo IntersectionObserver) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.card-hover:hover{transform:none}
}