/* ============================================================
   KairosAI · Design System — componenti + tipografia (v1.2)
   Importato dal "KairosAI Design System" (DesignSync).
   Dipende dai token di tokens.css (nomi/valori identici a colors_and_type.css).
   Caricato SOLO sulle landing webinar (inizia-con-ai / demo-claude-office) dopo tokens.css e lp.css.
   Prefissi DS: .t-*, .btn*, .card*, .badge*, .accent-callout*, .trust-strip,
   .price-block*, .input/.label, .link, .container/.section, .stack-*/.row-*.
   Non collide con .lp-*/.lpb-*.
   ============================================================ */

/* ===== TIPOGRAFIA SEMANTICA ===== */
.t-display-xl { font-family: var(--font-display); font-weight: 600; font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-display-lg { font-family: var(--font-display); font-weight: 600; font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.t-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); line-height: var(--leading-snug); }
.t-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl)); line-height: var(--leading-snug); }
.t-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); }
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); }
.t-label { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); line-height: var(--leading-snug); }
.t-overline {
  display: inline-block;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-blue);
  margin: 0 0 var(--space-3);
}
.t-mono-num { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.t-brand-num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); line-height: 1; }

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-base);
  border-radius: var(--radius-md); padding: 0.75rem 1.25rem;
  transition: background var(--dur-micro) var(--ease-std), color var(--dur-micro) var(--ease-std), box-shadow var(--dur-micro) var(--ease-std), border-color var(--dur-micro) var(--ease-std);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; user-select: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.5rem 0.75rem; font-size: var(--text-sm); }
.btn-md { padding: 0.75rem 1rem; font-size: var(--text-base); }
.btn-lg { padding: 1rem 1.5rem; font-size: var(--text-lg); }
.btn-block { width: 100%; }
.btn-primary { background: var(--color-cta); color: var(--color-cta-text); }
.btn-primary:hover { background: var(--color-cta-hover); }
.btn-primary:active { background: var(--color-cta-active); }
.btn-primary:focus-visible { box-shadow: var(--ring-focus); outline: none; }
.btn-secondary { background: var(--color-bg); color: var(--color-blue); border-color: var(--color-blue); }
.btn-secondary:hover { background: var(--color-blue-soft); }
.btn-secondary:focus-visible { box-shadow: var(--ring-focus); outline: none; }
.btn-ghost { background: transparent; color: var(--color-blue); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--color-cta-hover); text-decoration: underline; }
/* Un bottone-anchor deve battere `body.lp a { color }` (testo bianco su CTA blu). */
body.lp a.btn-primary { color: var(--color-cta-text); }
body.lp a.btn-secondary, body.lp a.btn-ghost { color: var(--color-blue); }

/* ===== CARDS ===== */
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.card-elevated { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg); border: none; }
.card-pricing { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-lg); }
.card-pricing.featured { background: var(--color-ink); color: var(--color-text-inverse); border: 2px solid var(--color-blue); }
.card-pricing.featured .t-overline { color: var(--color-mint); }

/* ===== BADGES ===== */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1.4; }
.badge-blue { background: var(--color-blue-soft); color: var(--color-blue); }
.badge-cyan { background: var(--color-cyan); color: var(--color-ink); }
.badge-mint { background: var(--color-mint); color: var(--color-ink); }
.badge-sage { background: var(--color-sage); color: var(--color-ink); }
.badge-gray { background: var(--color-bg-muted); color: var(--color-text-soft); }

/* ===== INPUTS ===== */
.input { font-family: var(--font-body); font-size: var(--text-base); padding: 0.75rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); width: 100%; transition: border-color var(--dur-micro) var(--ease-std), box-shadow var(--dur-micro) var(--ease-std); }
.input:focus { border-color: var(--color-blue); box-shadow: var(--ring-focus); outline: none; }
.input::placeholder { color: var(--color-gray); }
.input-error { border-color: var(--color-system-error); }
.label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-text); display: block; margin-bottom: 0.375rem; }

/* ===== LINKS ===== */
a.link, .link { color: var(--color-text-link); text-decoration: underline; text-decoration-color: var(--color-cyan); text-underline-offset: 3px; transition: color var(--dur-micro) var(--ease-std); }
a.link:hover, .link:hover { color: var(--color-text-link-hover); text-decoration-color: currentColor; }

/* ===== AI CALLOUTS (accento Mint, solo contenuti AI) ===== */
.accent-callout { background: var(--color-mint); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); color: var(--color-ink); display: flex; flex-direction: column; gap: var(--space-3); }
.accent-callout-soft { background: var(--color-mint-soft); border-left: 4px solid var(--color-mint); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--color-ink); }

/* ===== TRUST STRIP ===== */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.trust-strip__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-soft); }
.trust-strip__item .lp-ico { color: var(--color-blue); }

/* ===== PRICE BLOCK ===== */
.price-block { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.price-amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); line-height: 1; }
.price-suffix { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-muted); }

/* ===== ICONE (Lucide inline via <use>) ===== */
.lp-ico { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.lp-ico--sm { width: 16px; height: 16px; }
.lp-ico--lg { width: 24px; height: 24px; }
.lp-ico--xl { width: 32px; height: 32px; }

/* ===== SCAFFOLDING (facoltativo) ===== */
.container { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.section-tight { padding-block: var(--space-12); }

/* ===== UTILITIES ===== */
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.row-3 { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.row-4 { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.row-6 { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }