/* A cara do curso Joule Studio do zero, por cima da base comum (styles.css).

   Só troca os tokens e acrescenta o que é deste curso. Violeta sobre um fundo
   lavanda quase branco (e tinta no tema escuro) com acento verde água: lembra
   um estúdio de criação, sem imitar a marca de ninguém. O texto branco sobre
   os tons "-fill" fica acima de 4,5:1 nos dois temas. */

:root {
  --bg: #f6f5fb;
  --bg-elev: #fdfcff;
  --surface: #fdfcff;
  --surface-2: #eeebf7;
  --border: #e0dcee;
  --border-strong: #c8c1de;
  --text: #17142a;
  --text-soft: #544f6e;
  --text-faint: #86809f;

  --primary: #6d4bd8;
  --primary-hover: #5a3bbf;
  --primary-soft: #ebe5fb;
  --accent: #0f766e;
  --success: #15803d;
  --success-soft: #dcf3e3;
  --warn: #b45309;
  --warn-soft: #fbefd9;
  --danger: #c2262d;
  --danger-soft: #fbe5e5;

  --primary-fill: #6d4bd8;
  --primary-fill-hover: #5a3bbf;
  --accent-fill: #0f766e;

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0b14;
    --bg-elev: #131221;
    --surface: #161527;
    --surface-2: #1d1b32;
    --border: #2a2745;
    --border-strong: #3d3963;
    --text: #ecebf6;
    --text-soft: #b1aecb;
    --text-faint: #7f7b9c;
    --primary: #b79cff;
    --primary-hover: #cdb9ff;
    --primary-soft: #251f45;
    --accent: #3fd1bd;
    --success: #4ade80;
    --success-soft: #12301f;
    --warn: #fbbf24;
    --warn-soft: #3a2c10;
    --danger: #f87171;
    --danger-soft: #3a1717;
    --primary-fill: #6d4bd8;
    --primary-fill-hover: #7c5ce6;
    --accent-fill: #0f766e;
  }
}

:root[data-theme='light'] {
  --bg: #f6f5fb; --bg-elev: #fdfcff; --surface: #fdfcff; --surface-2: #eeebf7;
  --border: #e0dcee; --border-strong: #c8c1de; --text: #17142a; --text-soft: #544f6e; --text-faint: #86809f;
  --primary: #6d4bd8; --primary-hover: #5a3bbf; --primary-soft: #ebe5fb; --accent: #0f766e;
  --success: #15803d; --success-soft: #dcf3e3; --warn: #b45309; --warn-soft: #fbefd9;
  --danger: #c2262d; --danger-soft: #fbe5e5;
  --primary-fill: #6d4bd8; --primary-fill-hover: #5a3bbf; --accent-fill: #0f766e;
}

:root[data-theme='dark'] {
  --bg: #0c0b14; --bg-elev: #131221; --surface: #161527; --surface-2: #1d1b32;
  --border: #2a2745; --border-strong: #3d3963; --text: #ecebf6; --text-soft: #b1aecb; --text-faint: #7f7b9c;
  --primary: #b79cff; --primary-hover: #cdb9ff; --primary-soft: #251f45; --accent: #3fd1bd;
  --success: #4ade80; --success-soft: #12301f; --warn: #fbbf24; --warn-soft: #3a2c10;
  --danger: #f87171; --danger-soft: #3a1717;
  --primary-fill: #6d4bd8; --primary-fill-hover: #7c5ce6; --accent-fill: #0f766e;
}

/* A marca: uma centelha neutra num quadrado violeta. */
.brand-mark {
  background: var(--primary-fill); color: #ffffff; font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-fill) 18%, transparent);
}

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

/* O ambiente que trabalha sozinho na entrada. */
.jl-vitrine {
  margin-top: 26px; border-radius: 12px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); max-width: 560px; font-size: 13px;
}
.jl-vitrine-topo { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); }
.jl-vitrine-topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.jl-vitrine-topo span { margin-left: 8px; color: var(--text-soft); font-weight: 600; }
.jl-vitrine-etapas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.jl-vitrine-etapas li { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-faint); font-size: 12px; }
.jl-vitrine-etapas li.feita { color: var(--success); border-color: var(--success); }
.jl-vitrine-etapas li.atual { background: var(--primary-fill); border-color: var(--primary-fill); color: #ffffff; font-weight: 600; }
.jl-vitrine-painel { padding: 12px 14px 14px; min-height: 176px; display: grid; gap: 8px; align-content: start; }
.jl-fala { padding: 7px 10px; border-radius: 10px; background: var(--surface-2); color: var(--text); line-height: 1.45; }
.jl-fala.pedido { background: var(--primary-soft); justify-self: end; max-width: 92%; }
.jl-fala.ferramenta { font-family: var(--mono); font-size: 12px; color: var(--text-soft); background: transparent; border: 1px dashed var(--border-strong); }
.jl-fala.ok { color: var(--success); background: var(--success-soft); }

.jl-caso { max-width: 760px; color: var(--text-soft); line-height: 1.6; }

/* Os andares da trilha na vitrine. */
.jl-andares { display: grid; gap: 10px; margin-top: 8px; }
.jl-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);
}
.jl-andar b { font-size: 22px; color: var(--primary); line-height: 1; }
.jl-andar strong { display: block; margin-bottom: 3px; }
.jl-pergunta { margin: 0 0 6px; color: var(--text-soft); font-size: 14px; font-style: italic; }
.jl-andar ol { margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; }

/* O aviso de independência: discreto, no pé da vitrine. */
.jl-aviso { margin-top: 28px; font-size: 12px; color: var(--text-faint); max-width: 760px; line-height: 1.5; }