/* Mindflow — design tokens & chrome compartilhado (topbar, cabeçalho de página, rodapé, base).
   Segue o brandbook (Figma "Mindflow — Identidade visual"): PP Mori, preto/branco como estrutura,
   verde-limão como marca-texto, Gradiente Flow só em hero. */

@font-face{ font-family:'PP Mori'; src:url('../fonts/PPMori-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'PP Mori'; src:url('../fonts/PPMori-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'PP Mori'; src:url('../fonts/PPMori-Semibold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }

:root{
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F5F6;
  --ink:#000000;
  --ink-soft:#63666A;
  --ink-faint:#727579;
  --line:#E6E7E8;
  --accent:#000000;

  /* marca — fixos, não mudam com o tema */
  --lime:#CCFF03;
  --on-lime:#000000;
  --flow-a:#9A8FF9;
  --flow-b:#237AF9;
  --flow-gradient:linear-gradient(90deg, var(--flow-a), var(--flow-b));

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --font:'PP Mori', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sidebar-w:264px;
  --topbar-h:56px;
  --label-w:216px;
  --col-gap:56px;
  --brand-logo:url('../brand/logo_black.svg');
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#000000; --surface:#141618; --surface-2:#242628;
    --ink:#FFFFFF; --ink-soft:#A0A3A6; --ink-faint:#7C8084; --line:#242628;
    --accent:#CCFF03;
    --brand-logo:url('../brand/logo_lime.svg');
  }
}
:root[data-theme="dark"]{
  --ground:#000000; --surface:#141618; --surface-2:#242628;
  --ink:#FFFFFF; --ink-soft:#A0A3A6; --ink-faint:#7C8084; --line:#242628;
  --accent:#CCFF03;
  --brand-logo:url('../brand/logo_lime.svg');
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
}
h1,h2,h3{ font-weight:500; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; margin:0; color:var(--ink); }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:68ch; }
strong{ font-weight:600; color:var(--ink); }
em{ font-style:normal; font-weight:500; color:var(--ink); }
a:not([class]){ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--ink-faint); }
a:not([class]):hover{ background:var(--lime); color:var(--on-lime); text-decoration-color:transparent; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--lime); color:var(--on-lime); }
code{ font-family:var(--font-mono); font-size:.9em; }

/* marca-texto: o verde-limão sempre como fundo, com texto preto por cima (nunca como cor de texto no tema claro) */
.mark{ background:var(--lime); color:var(--on-lime); padding:0 .3em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ---------- TOPBAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:12px;
  padding:0 20px;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{ display:flex; align-items:center; text-decoration:none; }
.brand-mark{ display:block; width:112px; height:25px; background:var(--brand-logo) no-repeat left center; background-size:contain; }
#theme-toggle{ margin-left:auto; }
.icon-btn{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:36px; height:36px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:transparent; color:var(--ink);
  cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-2); }
.icon-btn svg{ width:18px; height:18px; }

/* ---------- COLUNA DE CONTEÚDO COMPARTILHADA ---------- */
.main-inner{ max-width:1120px; margin:0 auto; padding:0 48px 120px; }
@media (max-width: 880px){
  .main-inner{ padding:0 20px 90px; }
}

/* ---------- CABEÇALHO DE PÁGINA: número à esquerda, título à direita, linha fina embaixo ---------- */
.page-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:48px 0 28px; border-bottom:1px solid var(--line);
}
.page-num{ font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; }
.page-head h1{ font-size:clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); text-align:right; }

/* ---------- LINHAS: rótulo (número + título) à esquerda, conteúdo à direita ---------- */
:is(.row, article){
  display:grid; grid-template-columns:var(--label-w) minmax(0, 1fr); column-gap:var(--col-gap);
  padding:40px 0 44px; border-top:1px solid var(--line);
}
:is(.row, article) > *{ min-width:0; }
:is(.row, article) > h2{
  grid-column:1; grid-row:1 / span 60; align-self:start;
  position:sticky; top:24px;
  font-size:1.25rem;
}
:is(.row, article) > h2[data-num]::before{
  content:attr(data-num); display:block; margin-bottom:8px;
  font-size:12px; font-weight:400; letter-spacing:0; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
:is(.row, article) > :not(h2){ grid-column:2; }
.page-head + .row, .panel-intro{ border-top:none; }
@media (max-width: 880px){
  :is(.row, article){ grid-template-columns:1fr; padding:32px 0 36px; }
  :is(.row, article) > h2{ grid-row:auto; position:static; margin-bottom:18px; }
  :is(.row, article) > :not(h2){ grid-column:1; }
}

/* ---------- ELEMENTOS DE TEXTO COMUNS ---------- */
.eyebrow{ font-size:12px; letter-spacing:.02em; color:var(--ink-faint); margin-bottom:8px; }
.lead{ font-size:1.125rem; line-height:1.55; color:var(--ink-soft); max-width:60ch; }
blockquote{ font-size:1.25rem; font-weight:500; line-height:1.4; letter-spacing:-.01em; color:var(--ink); margin:24px 0 0; padding:0; max-width:52ch; }
.meta-row{ margin-top:24px; font-size:13px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:4px 12px; }

.progress-summary{ margin-top:28px; max-width:520px; }
.progress-summary .label{ font-size:13.5px; color:var(--ink); font-weight:500; margin-bottom:10px; }
.progress-bar{ display:flex; gap:3px; }
.progress-bar i{ flex:1; height:4px; background:var(--line); }
.progress-bar i.done{ background:var(--accent); }
.progress-bar i.mid{ background:color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- RODAPÉ ---------- */
footer{ margin-top:80px; padding-top:24px; border-top:1px solid var(--line); }
footer p{ font-size:12px; color:var(--ink-faint); margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}