/* ============================================================
   Integra Tudo AI — tokens da marca (Brandbook / Design System 2026-07)
   ------------------------------------------------------------
   FONTE ÚNICA da identidade. Nada de cor solta nas páginas: use var(--it-*).
   Ao mudar a marca, muda aqui e vale em todo lugar que importar este arquivo.

   Cópia gêmea em apps/feedback/brand.css — os apps têm deploy separado e são
   estáticos (sem bundler), então não há como importar de packages/. Ao editar
   um, replicar no outro.
   ============================================================ */
:root {
  /* ---- marca ---- */
  --it-red:      #FF0A2E;
  --it-magenta:  #FF1478;
  --it-pink:     #FF2E9D;
  --it-gradient: linear-gradient(125deg, #FF0A2E 0%, #FF1478 45%, #FF2E9D 100%);

  /* componentes RGB — para rgba(var(--it-magenta-rgb), .12) em opacidades */
  --it-red-rgb:     255,10,46;
  --it-magenta-rgb: 255,20,120;
  --it-pink-rgb:    255,46,157;
  --it-warning-rgb: 247,144,9;

  /* tints derivados da marca (para fundos suaves e estados hover) */
  --it-tint-50:  #FFF1F5;
  --it-tint-100: #FFE3EC;
  --it-tint-200: #FFC7DA;

  /* ---- neutros ---- */
  --it-ink:      #0D0D14;
  --it-graphite: #1C1C26;
  --it-gray-600: #5A5A68;
  --it-gray-400: #9A9AA8;
  --it-gray-200: #E4E4EC;
  --it-fog:      #F4F4F8;
  --it-white:    #FFFFFF;

  /* ---- semânticas ---- */
  --it-success: #12B76A;
  --it-warning: #F79009;
  --it-error:   #E5352B;
  --it-info:    #2E90FA;

  /* ---- forma ---- */
  --it-radius:     14px;
  --it-radius-btn: 10px;
  --it-radius-pill: 999px;
  --it-space: 4px;

  --it-shadow-sm: 0 1px 2px rgba(13,13,20,.06), 0 1px 3px rgba(13,13,20,.1);
  --it-shadow-md: 0 4px 6px -1px rgba(13,13,20,.08), 0 2px 4px -2px rgba(13,13,20,.06);
  --it-shadow-lg: 0 12px 24px -6px rgba(13,13,20,.12), 0 8px 16px -8px rgba(13,13,20,.08);
  /* sombra colorida do botão primário — assinatura da marca */
  --it-shadow-brand: 0 4px 14px rgba(255,20,120,.35);

  /* ---- tipografia ---- */
  --it-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --it-mono: 'JetBrains Mono', 'DejaVu Sans Mono', ui-monospace, monospace;
}

/* Texto em gradiente — o destaque de título do brandbook.
   Precisa de background-clip:text; sem cor de fundo o texto some, então
   aplique só em trechos curtos (uma ou duas palavras do título). */
.it-grad-text {
  background: var(--it-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- componentes base (espelham o Design System) ---- */
.it-btn {
  font-family: var(--it-font);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--it-radius-btn);
  padding: 11px 22px;
  border: 0;
  cursor: pointer;
  transition: .15s;
  line-height: 1.2;
}
.it-btn-primary {
  background: var(--it-gradient);
  color: #fff;
  box-shadow: var(--it-shadow-brand);
}
.it-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.it-btn-secondary {
  background: #fff;
  border: 1.5px solid var(--it-ink);
  color: var(--it-ink);
}
.it-btn-secondary:hover { background: var(--it-ink); color: #fff; }
.it-btn-ghost { background: transparent; color: var(--it-magenta); }
.it-btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }

.it-field label {
  font-size: 12px; font-weight: 600; color: var(--it-gray-600);
  display: block; margin-bottom: 6px;
}
.it-field input, .it-field select, .it-field textarea {
  width: 100%;
  font-family: var(--it-font);
  font-size: 14px;
  padding: 11px 14px;
  border: 1.5px solid var(--it-gray-200);
  border-radius: var(--it-radius-btn);
  outline: none;
  transition: .15s;
  color: var(--it-ink);
  background: #fff;
}
.it-field input:focus, .it-field select:focus, .it-field textarea:focus {
  border-color: var(--it-magenta);
  box-shadow: 0 0 0 3px rgba(255,20,120,.12);
}

.it-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--it-radius-pill);
}
.it-badge-success { background: rgba(18,183,106,.12);  color: var(--it-success); }
.it-badge-warning { background: rgba(247,144,9,.12);   color: var(--it-warning); }
.it-badge-error   { background: rgba(229,53,43,.12);   color: var(--it-error); }
.it-badge-info    { background: rgba(46,144,250,.12);  color: var(--it-info); }
.it-badge-brand   { background: var(--it-tint-50);     color: var(--it-magenta); }

.it-card {
  background: #fff;
  border: 1px solid var(--it-gray-200);
  border-radius: var(--it-radius);
  box-shadow: var(--it-shadow-sm);
}