/* ============================================================
   Chrystian Söuza — Design System · Componentes (cs-*)
   Requer tokens.css carregado antes.
   ============================================================ */

.cs-base {
  background: var(--cs-bg);
  color: var(--cs-fg);
  font-family: var(--cs-font-text);
}

/* — Marca — */
.cs-wordmark {
  font-family: var(--cs-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cs-fg);
}
.cs-wordmark .cs-o,            /* o "ö" */
.cs-wordmark .cs-dot {         /* o ponto final */
  color: var(--cs-accent);
}
.cs-accent-dot { color: var(--cs-accent); } /* ponto laranja em títulos */

.cs-badge {                    /* selo do "ö" (avatar/favicon) */
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--cs-coral); color: var(--cs-tinta);
  font-family: var(--cs-font-display); font-weight: 800; line-height: 1;
}

/* — Tipografia utilitária — */
.cs-eyebrow {
  font-size: var(--cs-fs-eyebrow); letter-spacing: var(--cs-tracking);
  text-transform: uppercase; font-weight: 600; color: var(--cs-muted);
}
.cs-h1 { font-family: var(--cs-font-display); font-weight: 700; font-size: var(--cs-fs-h1); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.cs-h2 { font-family: var(--cs-font-display); font-weight: 700; font-size: var(--cs-fs-h2); line-height: 1.08; letter-spacing: -0.01em; margin: 0; }
.cs-h3 { font-family: var(--cs-font-display); font-weight: 700; font-size: var(--cs-fs-h3); line-height: 1.12; margin: 0; }
.cs-lead { font-size: var(--cs-fs-lead); line-height: 1.55; color: var(--cs-fg-dim); }
.cs-body { font-size: var(--cs-fs-body); line-height: 1.7; color: var(--cs-fg-dim); }

/* — Botões — */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-text); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: var(--cs-radius-sm);
  border: none; cursor: pointer; text-decoration: none;
  transition: transform var(--cs-dur) var(--cs-ease), opacity var(--cs-dur) var(--cs-ease);
}
.cs-btn:hover { transform: translateY(-1px); }
.cs-btn--primary { background: var(--cs-coral); color: var(--cs-tinta); }
.cs-btn--ghost   { background: transparent; color: var(--cs-fg); border: 1.5px solid var(--cs-muted); padding: 14px 26px; }
.cs-link { color: var(--cs-accent); font-weight: 600; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--cs-accent) 40%, transparent); padding-bottom: 2px; }

/* — Tags de tema — */
.cs-tag {
  display: inline-block; font-size: 14px; font-weight: 500;
  padding: 8px 16px; border-radius: var(--cs-radius-pill);
  color: var(--cs-fg); background: rgba(147,160,190,0.14);
  border: 1px solid rgba(147,160,190,0.30); text-decoration: none;
}
.cs-tag--coral { color: #F2A79B; background: rgba(236,97,80,0.16); border-color: rgba(236,97,80,0.40); }

/* — Cards — */
.cs-card {
  background: var(--cs-surface); border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius); overflow: hidden;
}

/* — Campo / newsletter — */
.cs-field {
  width: 100%; box-sizing: border-box; padding: 15px 18px;
  border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-line);
  font-size: 16px; font-family: var(--cs-font-text);
  background: var(--cs-branco); color: var(--cs-breu);
}
.cs-field::placeholder { color: #9AA8A3; }

/* — Grafismo "dois pontos" (device) — */
.cs-device { display: inline-flex; gap: 0.5em; align-items: center; }
.cs-device::before, .cs-device::after { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; }
.cs-device::before { background: var(--cs-coral); }
.cs-device::after  { background: var(--cs-ambar); }

/* — Rótulo de publicidade (se houver AdSense) — */
.cs-ad { position: relative; }
.cs-ad::before { content: "Publicidade"; position: absolute; top: -18px; left: 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-muted); }

/* — Movimento respeitoso — */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}