/* ══════════════════════════════════════════════════════════════════════════
   HELIX SOMBRIA — tokens e componentes
   Princípio: a atmosfera vem da profundidade e da tipografia, não de brilho.
   Sombras são neutras (preto) para dar elevação; a cor de marca aparece em
   áreas pequenas — texto de apoio, bordas, o CTA. Nada pisca.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Base */
  --hellix-night:        #0b0708;
  --hellix-coal:         #120c0d;
  --hellix-panel:        #191113;
  --hellix-panel-raised: #211719;
  --hellix-line:         #33242a;
  --hellix-line-soft:    #241a1e;

  /* Marca */
  --hellix-orange:       #f2711c;
  --hellix-orange-hot:   #e2560d;
  --hellix-amber:        #e8a13c;
  --hellix-copper:       #a6552b;
  --hellix-ember:        #b8410c;

  /* Apoio */
  --hellix-purple:       #7c5cc4;
  --hellix-toxic:        #7fb432;
  --hellix-moon:         #efe3cd;

  /* Texto — hierarquia de três níveis, sem branco puro */
  --hellix-cream:        #f4ece3;
  --hellix-muted:        #a2938c;
  --hellix-muted-dim:    #6d6058;

  /* Semânticos */
  --hellix-success:      #7fb432;
  --hellix-danger:       #d9452b;
  --hellix-warning:      #e8a13c;

  /* Superfícies */
  --hellix-surface:      linear-gradient(180deg, #1a1214, #130d0f);
  --hellix-surface-warm: linear-gradient(180deg, #211719, #150e10);
  --hellix-cta:          linear-gradient(180deg, #f2711c, #d1550e);

  /* Elevação: preta e discreta. Nenhuma sombra colorida. */
  --hellix-shadow-sm:    0 1px 2px rgba(0, 0, 0, .40);
  --hellix-shadow:       0 4px 14px rgba(0, 0, 0, .40);
  --hellix-shadow-lg:    0 12px 32px rgba(0, 0, 0, .48);
  --hellix-shadow-xl:    0 24px 64px rgba(0, 0, 0, .55);

  /* Tipografia */
  --hellix-display: 'Barlow Condensed', 'Oswald', Impact, sans-serif;
  --hellix-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hellix-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Formas — raios contidos */
  --hellix-radius-sm: 6px;
  --hellix-radius:    10px;
  --hellix-radius-lg: 14px;
}

/* ─── Ícones ─────────────────────────────────────────────────────────────── */
/* Traço fino e uniforme, herdando a cor do texto. Substitui os emojis. */
.hx-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx-i--solid { fill: currentColor; stroke: none; }

/* ─── Rótulo de seção ────────────────────────────────────────────────────── */
.hx-eyebrow {
  display: inline-block;
  color: var(--hellix-orange);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ─── Marca ──────────────────────────────────────────────────────────────── */
.hx-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--hellix-cream);
  font-family: var(--hellix-display);
  line-height: .84;
}
.hx-brand b {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hx-brand strong {
  color: var(--hellix-orange);
  font-size: 38px;
  font-weight: 700;
}
.hx-brand small {
  margin-top: 8px;
  color: var(--hellix-muted);
  font: 500 10px/1 var(--hellix-body);
  letter-spacing: .22em;
}

/* ─── Botões ─────────────────────────────────────────────────────────────── */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--hellix-radius);
  background: var(--hellix-cta);
  box-shadow: var(--hellix-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--hellix-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.hx-btn:hover {
  background: linear-gradient(180deg, #f77f2c, #d85a0f);
  box-shadow: var(--hellix-shadow), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.hx-btn:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
.hx-btn:focus-visible { outline: 2px solid var(--hellix-amber); outline-offset: 2px; }
.hx-btn:disabled {
  cursor: not-allowed;
  background: #2a1f21;
  box-shadow: none;
  color: #6d5f5a;
}
.hx-btn--quiet {
  background: transparent;
  border: 1px solid var(--hellix-line);
  box-shadow: none;
  color: var(--hellix-cream);
}
.hx-btn--quiet:hover { background: #1d1517; border-color: #453238; box-shadow: none; }
.hx-btn--block { width: 100%; }
.hx-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ─── Painéis ────────────────────────────────────────────────────────────── */
.hx-panel {
  border: 1px solid var(--hellix-line);
  border-radius: var(--hellix-radius-lg);
  background: var(--hellix-surface);
  box-shadow: var(--hellix-shadow);
}
/* Fio de acento no topo, 1px — não uma barra de 2-3px */
.hx-panel--accent { border-top-color: var(--hellix-copper); }

/* ─── Campos ─────────────────────────────────────────────────────────────── */
.hx-input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--hellix-line);
  border-radius: var(--hellix-radius);
  background: #130d0f;
  color: var(--hellix-cream);
  font-family: var(--hellix-body);
  font-size: 15px;
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.hx-input::placeholder { color: var(--hellix-muted-dim); }
.hx-input:focus {
  border-color: var(--hellix-copper);
  box-shadow: 0 0 0 3px rgba(166, 85, 43, .18);
}

/* ─── Divisor ────────────────────────────────────────────────────────────── */
.hx-rule { height: 1px; border: 0; background: var(--hellix-line-soft); }

/* ─── Céu noturno (fallback quando não há a arte) ─────────────────────────── */
.hx-night-sky {
  background-color: var(--hellix-night);
  background-image: linear-gradient(180deg, #1a1013 0%, #150d10 48%, #0b0708 100%);
}

/* Véu para dar contraste ao texto sobre a arte de fundo */
.hx-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 7, 8, .55) 0%, rgba(11, 7, 8, .30) 40%, rgba(11, 7, 8, .88) 100%);
}

/* ─── Movimento ──────────────────────────────────────────────────────────── */
/* Um único gesto discreto. Nada de piscar ou pulsar. */
@keyframes hx-rise {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}
.hx-rise { animation: hx-rise .5s cubic-bezier(.22, .8, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .hx-rise { animation: none; }
}