/* Single Software — base + utilities compartilhadas
   Carrega reset → fonts → tokens → estilos base
*/
@import url('./reset.css');
@import url('./fonts.css');
@import url('./tokens.css');

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

/* ── Tipografia ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: 1.2; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-family: var(--font-display); font-weight: var(--fw-regular); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-regular); }
p  { font-size: var(--fs-p); line-height: var(--lh-p); }

a { color: var(--color-brand-strong); transition: color .15s; }
a:hover { color: var(--color-accent-magenta); }

/* ── Layout ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-x);
}

.section { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.text-brand  { color: var(--color-brand-strong); }
.text-accent { color: var(--color-accent-magenta); }
.text-green  { color: var(--color-accent-green); }

/* ── Botoes ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent-magenta);
  color: var(--color-text);
  box-shadow: 0 0 24px rgba(247, 65, 247, .35);
}
.btn-primary:hover { background: var(--color-brand-strong); transform: translateY(-1px); color: var(--color-text); }

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
}
.btn-secondary:hover { background: var(--color-divider); border-color: var(--color-brand-strong); color: var(--color-text); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
}
.btn-ghost:hover { color: var(--color-brand-strong); }

/* ── Badges / chips ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
}
.badge-green { background: rgba(151, 255, 125, .15); color: var(--color-accent-green); }
.badge-magenta { background: rgba(247, 65, 247, .15); color: var(--color-accent-magenta); }
.badge-purple { background: rgba(167, 62, 249, .15); color: var(--color-brand-strong); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* ── Topbar (component) ──────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 4, 17, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 72px;
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); color: var(--color-text); text-decoration: none; }
.topbar__brand-mark { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--color-brand-strong), var(--color-accent-magenta)); }
.topbar__nav { display: flex; align-items: center; gap: var(--space-2); }
.topbar__nav a { color: var(--color-text); text-decoration: none; padding: var(--space-2) var(--space-3); font-size: var(--fs-h5); font-weight: var(--fw-medium); border-radius: var(--radius-md); transition: background .15s; }
.topbar__nav a:hover { background: var(--color-divider); color: var(--color-text); }
.topbar__nav a.is-active { color: var(--color-brand-strong); }
.topbar__cta { display: flex; gap: var(--space-3); }
.topbar__burger { display: none; background: none; border: 0; color: var(--color-text); padding: var(--space-2); }

@media (max-width: 1023px) {
  .topbar__nav, .topbar__cta { display: none; }
  .topbar__burger { display: inline-flex; }
}

/* ── Footer (component) ──────────────────────────────────────── */
.footer {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-divider);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-20);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-12);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__brand-name { font-size: 1.5rem; font-weight: var(--fw-bold); }
.footer__col h4 { font-size: var(--fs-h5); margin-bottom: var(--space-4); color: var(--color-text); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a { color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-h5); }
.footer__col a:hover { color: var(--color-brand-strong); }
.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-h6);
}

@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); }
}

/* ── Form de contato (component) ─────────────────────────────── */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.contact-form__row-full { grid-column: 1 / -1; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  transition: border-color .15s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline: none; border-color: var(--color-brand-strong); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form label { display: block; font-size: var(--fs-h5); font-weight: var(--fw-medium); margin-bottom: var(--space-2); color: var(--color-text); }

@media (max-width: 639px) {
  .contact-form { grid-template-columns: 1fr; }
}

/* ── Hero background utility ─────────────────────────────────── */
.bg-hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 62, 249, .35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(247, 65, 247, .25) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(60, 109, 250, .2) 0%, transparent 50%),
    var(--color-bg);
}

/* ── Utility scroll ──────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }