/* ============================================================
   SMSGate Theme – Design Tokens
   Fedeli allo screenshot sms-gate.app (light mode)
   ============================================================ */

:root {
  /* ── Background ── */
  --clr-bg:           #EEF2F7;   /* sfondo hero / pagina principale */
  --clr-bg-alt:       #E4EAF3;   /* sezioni alternate (leggermente più scuro) */
  --clr-bg-header:    #ffffff;   /* header bianco */
  --clr-bg-card:      #ffffff;   /* card bianche */
  --clr-bg-code:      #f8fafc;   /* aree codice */
  --clr-bg-footer:    #1e293b;   /* footer scuro */

  /* ── Testo ── */
  --clr-text:         #374151;   /* corpo testo */
  --clr-text-muted:   #64748b;   /* descrizioni, sottotitoli */
  --clr-text-subtle:  #94a3b8;   /* placeholder, note */
  --clr-heading:      #1a2332;   /* heading quasi-nero con tocco blu */
  --clr-footer-text:  #94a3b8;

  /* ── Accent blu ── */
  --clr-accent:       #2563EB;   /* blu principale */
  --clr-accent-hover: #1d4ed8;   /* hover più scuro */
  --clr-accent-light: #dbeafe;   /* sfondo accent leggero */
  --clr-accent-icon:  #3b82f6;   /* icone card */

  /* ── Bordi ── */
  --clr-border:       #e2e8f0;
  --clr-border-card:  #e8edf5;

  /* ── Status ── */
  --clr-success: #16a34a;
  --clr-warning: #d97706;
  --clr-danger:  #dc2626;

  /* ── Typography ── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Border radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-header: 0 1px 0 var(--clr-border);

  /* ── Layout ── */
  --container-max: 1100px;
  --container-pad: clamp(1rem, 5vw, 2rem);
  --header-h: 128px;

  /* ── Transition ── */
  --transition: 180ms ease;
}

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");