/* ============================================================
   INNOVAZIONE DIGITALE IMPRESE — Component Library
   Versione 1.0 · Maggio 2026
   ------------------------------------------------------------
   Componenti base costruiti sui token di idi-tokens.css.
   Importa DOPO idi-tokens.css.
   Convenzione classi: prefisso .idi-
   ============================================================ */

/* ---- Reset minimo ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--idi-font-sans);
  font-size: var(--idi-text-base);
  line-height: var(--idi-leading-normal);
  color: var(--idi-ink);
  background: var(--idi-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.idi-display {
  font-size: var(--idi-text-4xl);
  font-weight: var(--idi-fw-bold);
  line-height: var(--idi-leading-tight);
  letter-spacing: var(--idi-tracking-tight);
  color: var(--idi-teal);
  text-wrap: balance;
}
.idi-h1 {
  font-size: var(--idi-text-3xl);
  font-weight: var(--idi-fw-bold);
  line-height: var(--idi-leading-tight);
  letter-spacing: var(--idi-tracking-tight);
  color: var(--idi-teal);
  text-wrap: balance;
}
.idi-h2 {
  font-size: var(--idi-text-2xl);
  font-weight: var(--idi-fw-bold);
  line-height: var(--idi-leading-snug);
  letter-spacing: var(--idi-tracking-snug);
  color: var(--idi-teal);
}
.idi-h3 {
  font-size: var(--idi-text-xl);
  font-weight: var(--idi-fw-bold);
  line-height: var(--idi-leading-snug);
  letter-spacing: var(--idi-tracking-snug);
  color: var(--idi-teal);
}
.idi-lead {
  font-size: var(--idi-text-lg);
  font-weight: var(--idi-fw-regular);
  line-height: var(--idi-leading-normal);
  color: var(--idi-ink);
  max-width: var(--idi-container-text);
  text-wrap: pretty;
}
.idi-body  { font-size: var(--idi-text-base); line-height: var(--idi-leading-relaxed); color: var(--idi-ink); max-width: var(--idi-container-text); }
.idi-small { font-size: var(--idi-text-sm); color: var(--idi-ink-mute); }

/* Eyebrow / kicker — la label maiuscola arancione del brand */
.idi-eyebrow {
  display: inline-block;
  font-size: var(--idi-eyebrow-size);
  font-weight: var(--idi-fw-bold);
  letter-spacing: var(--idi-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--idi-orange);
}

/* Link */
.idi-link {
  color: var(--idi-teal);
  text-decoration: none;
  border-bottom: 2px solid var(--idi-orange);
  padding-bottom: 1px;
  transition: color var(--idi-dur-base) var(--idi-ease);
}
.idi-link:hover { color: var(--idi-orange-deep); }

/* ============================================================
   IL MOTIVO "TRE PILLOLE" — firma visiva del brand
   <span class="idi-pills" aria-hidden="true"><i></i><i></i><i></i></span>
   ============================================================ */
.idi-pills {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.35em;
  height: 1.4em;
}
.idi-pills i {
  display: block;
  width: 0.28em;
  border-radius: var(--idi-radius-pill) var(--idi-radius-pill) 0 0;
}
.idi-pills i:nth-child(1) { height: 60%; background: var(--idi-cream); }
.idi-pills i:nth-child(2) { height: 80%; background: var(--idi-orange); }
.idi-pills i:nth-child(3) { height: 100%; background: var(--idi-teal); }
.idi-on-teal .idi-pills i:nth-child(3) { background: #fff; }

/* ============================================================
   BOTTONI
   ============================================================ */
.idi-btn {
  --_bg: var(--idi-teal);
  --_fg: #fff;
  --_bg-hover: var(--idi-teal-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--idi-space-2);
  font-family: var(--idi-font-sans);
  font-size: var(--idi-text-base);
  font-weight: var(--idi-fw-semibold);
  line-height: 1;
  letter-spacing: var(--idi-tracking-snug);
  padding: 0.9em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--idi-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--idi-dur-base) var(--idi-ease),
              border-color var(--idi-dur-base) var(--idi-ease),
              transform var(--idi-dur-fast) var(--idi-ease);
}
.idi-btn:hover { background: var(--_bg-hover); }
.idi-btn:active { transform: translateY(1px); }
.idi-btn:focus-visible { outline: none; box-shadow: var(--idi-focus-ring); }

/* Varianti */
.idi-btn--primary { --_bg: var(--idi-teal);   --_fg:#fff; --_bg-hover: var(--idi-teal-deep); }
.idi-btn--accent  { --_bg: var(--idi-orange); --_fg: var(--idi-ink); --_bg-hover: var(--idi-orange-deep); }
.idi-btn--outline {
  background: transparent;
  color: var(--idi-teal);
  border-color: var(--idi-teal);
}
.idi-btn--outline:hover { background: var(--idi-teal-soft); }
.idi-btn--ghost {
  background: transparent;
  color: var(--idi-teal);
}
.idi-btn--ghost:hover { background: var(--idi-teal-soft); }

/* Pill button — usa il raggio-identità per CTA primarie d'impatto */
.idi-btn--pill { border-radius: var(--idi-radius-pill); }

/* Dimensioni */
.idi-btn--sm { font-size: var(--idi-text-sm); padding: 0.7em 1.2em; }
.idi-btn--lg { font-size: var(--idi-text-md); padding: 1em 2em; }

/* Su superficie teal */
.idi-on-teal .idi-btn--primary { --_bg: var(--idi-orange); --_fg: var(--idi-ink); --_bg-hover: var(--idi-orange-deep); }
.idi-on-teal .idi-btn--outline { color:#fff; border-color: rgba(255,255,255,0.5); }
.idi-on-teal .idi-btn--outline:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   TAG / BADGE / CHIP — usa il raggio pillola (identità)
   ============================================================ */
.idi-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--idi-space-2);
  font-size: var(--idi-text-sm);
  font-weight: var(--idi-fw-semibold);
  line-height: 1;
  padding: 0.45em 0.9em;
  border-radius: var(--idi-radius-pill);
  background: var(--idi-teal-soft);
  color: var(--idi-teal);
}
.idi-tag--accent  { background: var(--idi-orange-soft); color: var(--idi-orange-deep); }
.idi-tag--solid   { background: var(--idi-teal); color: #fff; }
.idi-tag--success { background: var(--idi-success-soft); color: var(--idi-success); }
.idi-tag--danger  { background: var(--idi-danger-soft);  color: var(--idi-danger); }

/* Dot indicatore */
.idi-dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: var(--idi-radius-pill);
  background: var(--idi-orange);
}

/* ============================================================
   CARD
   ============================================================ */
.idi-card {
  background: var(--idi-white);
  border: 1px solid var(--idi-line);
  border-radius: var(--idi-radius-md);
  padding: var(--idi-space-6);
  transition: border-color var(--idi-dur-base) var(--idi-ease),
              box-shadow var(--idi-dur-base) var(--idi-ease);
}
.idi-card--interactive { cursor: pointer; }
.idi-card--interactive:hover {
  border-color: var(--idi-line-strong);
  box-shadow: var(--idi-shadow-md);
}
/* Card "feature" — bordo superiore arancione, pattern ricorrente nelle slide */
.idi-card--feature { border-top: 4px solid var(--idi-orange); }
/* Card scura */
.idi-card--teal {
  background: var(--idi-teal);
  border-color: transparent;
  color: #fff;
}
.idi-card--teal .idi-h3 { color: #fff; }

/* Numero gigante per card numerate (pattern "obiettivi"/"step") */
.idi-card-num {
  font-size: var(--idi-text-2xl);
  font-weight: var(--idi-fw-extra);
  letter-spacing: var(--idi-tracking-tight);
  color: var(--idi-teal);
  line-height: 0.9;
}
.idi-card-num::after {
  content: "";
  display: block;
  width: 28px; height: 4px;
  margin-top: var(--idi-space-3);
  border-radius: var(--idi-radius-pill);
  background: var(--idi-orange);
}

/* ============================================================
   FORM
   ============================================================ */
.idi-field { display: flex; flex-direction: column; gap: var(--idi-space-2); }
.idi-label {
  font-size: var(--idi-text-sm);
  font-weight: var(--idi-fw-semibold);
  color: var(--idi-ink);
}
.idi-input,
.idi-textarea,
.idi-select {
  font-family: var(--idi-font-sans);
  font-size: var(--idi-text-base);
  color: var(--idi-ink);
  background: var(--idi-white);
  border: 1px solid var(--idi-line-strong);
  border-radius: var(--idi-radius-sm);
  padding: 0.75em 1em;
  width: 100%;
  transition: border-color var(--idi-dur-base) var(--idi-ease),
              box-shadow var(--idi-dur-base) var(--idi-ease);
}
.idi-input::placeholder,
.idi-textarea::placeholder { color: var(--idi-ink-faint); }
.idi-input:focus,
.idi-textarea:focus,
.idi-select:focus {
  outline: none;
  border-color: var(--idi-teal);
  box-shadow: var(--idi-focus-ring);
}
.idi-input:disabled { background: var(--idi-cream-soft); color: var(--idi-ink-faint); cursor: not-allowed; }
.idi-help { font-size: var(--idi-text-sm); color: var(--idi-ink-mute); }
.idi-field--error .idi-input { border-color: var(--idi-danger); }
.idi-field--error .idi-help  { color: var(--idi-danger); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.idi-container { width: 100%; max-width: var(--idi-container); margin-inline: auto; padding-inline: var(--idi-space-5); }
.idi-container--wide { max-width: var(--idi-container-wide); }
.idi-section { padding-block: var(--idi-space-10); }
.idi-section--alt { background: var(--idi-cream-soft); }
.idi-stack > * + * { margin-top: var(--idi-space-5); }
.idi-grid { display: grid; gap: var(--idi-space-5); }
.idi-grid--2 { grid-template-columns: repeat(2, 1fr); }
.idi-grid--3 { grid-template-columns: repeat(3, 1fr); }
.idi-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .idi-grid--3, .idi-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .idi-grid--2, .idi-grid--3, .idi-grid--4 { grid-template-columns: 1fr; }
}

/* Divisore decorativo a pillola arancione (sostituisce <hr>) */
.idi-rule {
  border: 0;
  width: 56px; height: 6px;
  border-radius: var(--idi-radius-pill);
  background: var(--idi-orange);
  margin: var(--idi-space-5) 0;
}

/* ============================================================
   ACCESSIBILITÀ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}