/* ============================================================================
   course-builder — BASE + SHARED PRIMITIVES
   Reset, typography base, and the reusable atoms that every layout shares.
   Consumes tokens.css only — no hard-coded colors live here.
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Optional grain/texture overlay — enabled per theme via --texture:1 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: calc(var(--texture, 0) * 0.5);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100%;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ink-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semi);
}
.skip-link:focus {
  top: 12px;
}

/* ----------------------------------------------------------------------------
   TYPOGRAPHIC ATOMS
   ---------------------------------------------------------------------------- */

/* Eyebrow — "FASE 5 · BLOCO 1" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Section/group label — muted uppercase ("FASE 5 — SQUADS") */
.label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* Lesson display title — heavy, tight, editorial period handled in HTML */
.lesson-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--ink);
  text-wrap: balance;
}
.lesson-title .dot {
  color: var(--accent);
}

/* Subtitle under the title — uppercase, muted */
.subtitle {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Category chip — "CONTEXTO" / "REFERÊNCIA" */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.34em 0.7em;
  border-radius: var(--radius-chip);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.chip.is-bonus {
  background: color-mix(in srgb, var(--bonus) 12%, transparent);
  color: var(--bonus);
}
.chip.is-muted {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-muted);
}

/* Short thick accent divider — the section-marker motif */
.divider {
  width: 38px;
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: var(--accent);
  margin: 1.4rem 0;
}

/* ----------------------------------------------------------------------------
   PROSE — the lesson body content (driven by markdown → HTML)
   ---------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
  color: var(--ink-muted);
}
.prose > * + * {
  margin-top: 1.05rem;
}

.prose p {
  font-size: var(--fs-body);
}
.prose .lead {
  font-size: var(--fs-lead);
  color: var(--ink);
}

.prose strong,
.prose b {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.prose em {
  font-style: italic;
}
.prose a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.prose h2 {
  margin-top: 2.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.prose h3 {
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 0;
  list-style: none;
}
.prose li {
  position: relative;
  padding-left: 1.5rem;
}
.prose li + li {
  margin-top: 0.55rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent);
}
.prose ol {
  counter-reset: ol;
}
.prose ol li::before {
  counter-increment: ol;
  content: counter(ol);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.8em;
  font-weight: var(--fw-bold);
  color: var(--accent);
}

.prose blockquote {
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
}
.prose pre {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  overflow-x: auto;
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.prose th,
.prose td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.prose th {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* Callout — a content block the skill emits from markdown blockquotes/admonitions */
.callout {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.callout .callout-icon {
  color: var(--accent);
  flex: none;
  font-weight: var(--fw-bold);
}
.callout-title {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* ----------------------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.7em 1.25em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: var(--bg-elevated);
  color: var(--ink-muted);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   NUMBER BADGE — circular index used in block lists / trail nodes
   ---------------------------------------------------------------------------- */
.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  transition: all var(--dur) var(--ease);
}
.badge.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.badge.is-done {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* ----------------------------------------------------------------------------
   PROGRESS — bar + dots (top strip)
   ---------------------------------------------------------------------------- */
.progress-track {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--bg-sunken);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease);
}

.dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--border-strong);
  transition: all var(--dur) var(--ease);
}
.dots .dot.is-active {
  background: var(--ink);
  transform: scale(1.15);
}
.dots .dot.is-done {
  background: var(--accent);
}

/* ----------------------------------------------------------------------------
   THEME SWITCHER (showcase chrome — not part of a real course)
   ---------------------------------------------------------------------------- */
.theme-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.theme-switch button {
  padding: 0.4em 0.9em;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-subtle);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.theme-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ink-inverse);
}

/* Compact palette switcher — color dots (used in layout top bars where
   space is tight). Each dot previews that theme's accent color. */
.theme-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
}
.theme-dots button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--bg);
  border-radius: 50%;
  cursor: pointer;
  outline: 1px solid var(--border-strong);
  outline-offset: 0;
  transition:
    transform var(--dur) var(--ease),
    outline-color var(--dur) var(--ease);
}
.theme-dots button:hover {
  transform: scale(1.12);
}
.theme-dots button[aria-pressed="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  transform: scale(1.1);
}
/* fixed preview swatches (intentional literals — they show each theme's color) */
.swatch-dot.t-autonomia {
  background: #ff4d00;
}
.swatch-dot.t-editorial {
  background: #9b1c1c;
}
.swatch-dot.t-midnight {
  background: #c5f82a;
}
.swatch-dot.t-youtube {
  background: #ff0000;
}
.swatch-dot.t-sunset {
  background: #ff5a5f;
}
.swatch-dot.t-ocean {
  background: #0891b2;
}

/* Visually-hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* h4 in prose (generated from #### in markdown) */
.prose h4 {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--ink);
}