/* A cara do curso Harness de IA, por cima da base comum (styles.css).

   Só troca os tokens e acrescenta o que é deste curso: a base continua sendo a
   mesma dos outros portais, e o que é comum não se copia. Âmbar de terminal e
   verde água sobre um fundo de tinta: as cores lembram o terminal onde o curso
   acontece, sem imitar a marca de ninguém.

   O texto branco sobre os tons "-fill" fica acima de 4,5:1 nos dois temas
   (conferido com a fórmula de contraste da WCAG, 25/10/2026). */

:root {
  --bg: #f7f5f0;
  --bg-elev: #fffdf8;
  --surface: #fffdf8;
  --surface-2: #f1ede4;
  --border: #e4ddcf;
  --border-strong: #cfc5b2;
  --text: #17140f;
  --text-soft: #5c5446;
  --text-faint: #8d8473;

  --primary: #b4470f;
  --primary-hover: #923a0c;
  --primary-soft: #fbe9dc;
  --accent: #0f766e;
  --success: #15803d;
  --success-soft: #dcf3e3;
  --warn: #b45309;
  --warn-soft: #fbefd9;
  --danger: #c2262d;
  --danger-soft: #fbe5e5;

  --primary-fill: #b4470f;
  --primary-fill-hover: #923a0c;
  --accent-fill: #0f766e;

  --mono: 'Cascadia Mono', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0c0f;
    --bg-elev: #111419;
    --surface: #13171d;
    --surface-2: #1a1f27;
    --border: #262c36;
    --border-strong: #38404d;
    --text: #edebe6;
    --text-soft: #b0aa9f;
    --text-faint: #7d786f;
    --primary: #f2a052;
    --primary-hover: #f7bd84;
    --primary-soft: #3a2412;
    --accent: #3fd1bd;
    --success: #4ade80;
    --success-soft: #12301f;
    --warn: #fbbf24;
    --warn-soft: #3a2c10;
    --danger: #f87171;
    --danger-soft: #3a1717;
    --primary-fill: #b4470f;
    --primary-fill-hover: #c2541a;
    --accent-fill: #0f766e;
  }
}

:root[data-theme='light'] {
  --bg: #f7f5f0; --bg-elev: #fffdf8; --surface: #fffdf8; --surface-2: #f1ede4;
  --border: #e4ddcf; --border-strong: #cfc5b2; --text: #17140f; --text-soft: #5c5446; --text-faint: #8d8473;
  --primary: #b4470f; --primary-hover: #923a0c; --primary-soft: #fbe9dc; --accent: #0f766e;
  --success: #15803d; --success-soft: #dcf3e3; --warn: #b45309; --warn-soft: #fbefd9;
  --danger: #c2262d; --danger-soft: #fbe5e5;
  --primary-fill: #b4470f; --primary-fill-hover: #923a0c; --accent-fill: #0f766e;
}

:root[data-theme='dark'] {
  --bg: #0a0c0f; --bg-elev: #111419; --surface: #13171d; --surface-2: #1a1f27;
  --border: #262c36; --border-strong: #38404d; --text: #edebe6; --text-soft: #b0aa9f; --text-faint: #7d786f;
  --primary: #f2a052; --primary-hover: #f7bd84; --primary-soft: #3a2412; --accent: #3fd1bd;
  --success: #4ade80; --success-soft: #12301f; --warn: #fbbf24; --warn-soft: #3a2c10;
  --danger: #f87171; --danger-soft: #3a1717;
  --primary-fill: #b4470f; --primary-fill-hover: #c2541a; --accent-fill: #0f766e;
}

/* A marca: um cursor de terminal piscando dentro do quadrado. */
.brand-mark {
  background: #0c0c0c; color: var(--primary); font-family: var(--mono); font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.brand-mark::after { content: '_'; animation: hn-pisca 1.1s steps(1) infinite; }
@keyframes hn-pisca { 50% { opacity: 0; } }

/* ---------- a entrada do portal ---------- */
.hn-titulo-mono { font-family: var(--mono); letter-spacing: -0.03em; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.12; }
.hn-titulo-mono em { font-style: normal; color: var(--primary); }

/* O terminal que digita sozinho na entrada. */
.hn-vitrine-term {
  margin-top: 26px; border-radius: 12px; overflow: hidden; background: #0c0c0c;
  border: 1px solid #262626; box-shadow: var(--shadow-lg); font-family: var(--mono);
  font-size: 13px; line-height: 1.55; color: #cccccc; max-width: 560px;
}
.hn-vitrine-term-topo { display: flex; gap: 6px; padding: 9px 12px; background: #1f1f1f; }
.hn-vitrine-term-topo i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.hn-vitrine-term-corpo { padding: 12px 14px 14px; min-height: 196px; white-space: pre-wrap; }
.hn-vitrine-term-corpo .u { color: #999999; }
.hn-vitrine-term-corpo .f { color: #ffffff; font-weight: 700; }
.hn-vitrine-term-corpo .r { color: #999999; }
.hn-vitrine-term-corpo .ok { color: #4eba65; }
.hn-vitrine-term-corpo .c { color: #d97757; }
.hn-cursor { display: inline-block; width: 8px; height: 15px; background: #cccccc; vertical-align: -2px; animation: hn-pisca 1s steps(1) infinite; }

/* Os andares da trilha na vitrine. */
.hn-andares { display: grid; gap: 10px; margin-top: 8px; }
.hn-andar {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.hn-andar b { font-family: var(--mono); font-size: 22px; color: var(--primary); line-height: 1; }
.hn-andar strong { display: block; margin-bottom: 3px; }
.hn-andar p { margin: 0; color: var(--text-soft); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .brand-mark::after, .hn-cursor { animation: none; }
}