/* Ralenti: design system leve. CSS puro, só tokens e componentes. Sem build.
 * Estilo: minimalista e sério, inspirado na Apple (claro, muito espaço, tipografia grande, cantos arredondados).
 * Um único acento azul, só em botão principal e link. Vermelho só para alerta, sempre com texto e ícone.
 * Uso: <link rel="stylesheet" href="/ralenti/ralenti.css">. Vitrine dos componentes: /ralenti/componentes.html
 * Regras de público (pessoas mais velhas): corpo >= 18px, botão >= 52px, contraste AA, foco sempre visível,
 * estado (atrasado, prejuízo, problema) nunca só por cor: texto + ícone + cor. */

:root {
  /* ---- cores ---- */
  --rl-tinta: #1d1d1f;        /* texto: 16:1 sobre branco */
  --rl-tinta-2: #424245;      /* texto secundário: 10:1 */
  --rl-cinza: #6e6e73;        /* texto de apoio: 5,1:1 sobre branco, 4,7:1 sobre #f5f5f7 */
  --rl-fundo-cinza: #f5f5f7;  /* fundo de página e de seções alternadas */
  --rl-linha-fraca: #d2d2d7;  /* divisor decorativo */
  --rl-linha-campo: #86868b;  /* borda de campo: 3,6:1 (contraste de componente) */
  --rl-azul: #0071e3;         /* único acento: botão principal. Branco sobre ele: 4,6:1 */
  --rl-azul-hover: #0077ed;
  --rl-azul-ativo: #006edb;
  --rl-azul-link: #0066cc;    /* link: 5,6:1 sobre branco */
  --rl-vermelho: #d70015;     /* só alerta: 5,5:1 sobre branco */
  --rl-vermelho-fundo: #fff1f1;

  /* ---- tipografia ---- */
  --rl-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  --rl-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  --rl-mono: var(--rl-sans);   /* números e códigos usam a mesma família, com algarismos tabulares */
  --t-corpo: clamp(1.125rem, 1.07rem + 0.2vw, 1.1875rem);   /* 18px no celular, 19px no desktop */
  --t-apoio: 1rem;                                          /* 16px: rótulos e ajuda, nunca corpo */
  --t-lead: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --t-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --t-h2: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);
  --lh-corpo: 1.55;

  /* ---- espaço, forma, movimento ---- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 56px; --e8: 88px; --e9: 128px;
  --rl-raio: 12px;              /* campos, avisos, blocos pequenos */
  --rl-raio-card: 20px;         /* cartões */
  --rl-raio-pilula: 999px;      /* botões, pílulas, chips */
  --rl-linha: 1px;
  --rl-botao-h: 52px;           /* mínimo por regra */
  --rl-largura: 1080px;
  --rl-sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px rgba(0, 0, 0, .05);
  --rl-passo: cubic-bezier(.25, .1, .25, 1);

  /* ícones simples de estado (máscara em currentColor) */
  --rl-ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E");
  --rl-ico-alerta-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d70015' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E");   /* o mesmo ícone, já em vermelho (pra fundo de pseudo-elemento com texto) */
  --rl-ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.3 9.5'/%3E%3C/svg%3E");
  --rl-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E");
}

/* Temas. A página começa branca; .papel é o cinza claro das telas de trabalho e das seções alternadas
 * (o cartão dentro dele fica branco). .escuro continua existindo só como "voltar ao branco". */
:root, .escuro {
  --fundo: #fff;
  --texto: var(--rl-tinta);
  --texto-2: var(--rl-tinta-2);
  --apoio: var(--rl-cinza);
  --superficie: #fff;
  --borda: var(--rl-linha-campo);
  --borda-suave: var(--rl-linha-fraca);
  --inverso-fundo: var(--rl-tinta);
  --inverso-texto: #fff;
}
.papel, .escuro { background: var(--fundo); color: var(--texto); }
.papel {
  --fundo: var(--rl-fundo-cinza);
  --superficie: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 var(--t-corpo)/var(--lh-corpo) var(--rl-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--rl-display); line-height: 1.12; margin: 0 0 var(--e4); font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }
p { margin: 0 0 var(--e4); }
:where(p, li) { max-width: 62ch; }
::selection { background: rgba(0, 113, 227, .22); color: inherit; }

/* Link: azul, sublinhado (nada de link escondido) */
a { color: var(--rl-azul-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Foco visível em tudo: anel azul com respiro */
:focus-visible { outline: 3px solid var(--rl-azul); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.rl-so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------- botão ---------------- */
.rl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e3);
  min-height: var(--rl-botao-h); padding: 0 var(--e6);
  font: 600 1.125rem/1.2 var(--rl-sans); letter-spacing: -.01em; text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--texto); background: #fff; border: 1px solid var(--rl-linha-campo); border-radius: var(--rl-raio-pilula);
  cursor: pointer; position: relative;
  transition: background-color .2s var(--rl-passo), border-color .2s var(--rl-passo), transform .12s var(--rl-passo);
  -webkit-tap-highlight-color: transparent;
}
.rl-btn:hover { background: var(--rl-fundo-cinza); text-decoration: none; }
.rl-btn:active { transform: scale(.98); }
.rl-btn.primario { background: var(--rl-azul); color: #fff; border-color: var(--rl-azul); }
.rl-btn.primario:hover { background: var(--rl-azul-hover); border-color: var(--rl-azul-hover); }
.rl-btn.primario:active { background: var(--rl-azul-ativo); }
.rl-btn.grande { min-height: 60px; padding: 0 var(--e7); font-size: 1.1875rem; }
.rl-btn.cheio { width: 100%; }
.rl-btn[disabled], .rl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.rl-btn .seta { font-weight: 600; }

/* ---------------- campo ---------------- */
.rl-campo { margin: 0 0 var(--e5); }
.rl-campo > label, .rl-campo > .rl-rotulo { display: block; font-weight: 600; font-size: 1.125rem; margin-bottom: var(--e2); }
.rl-campo input, .rl-campo select, .rl-campo textarea {
  width: 100%; min-height: var(--rl-botao-h); padding: var(--e3) var(--e4);
  font: 400 1.125rem/1.4 var(--rl-sans); color: var(--texto); background: var(--superficie);
  border: 1px solid var(--rl-linha-campo); border-radius: var(--rl-raio);
}
.rl-campo textarea { min-height: 128px; resize: vertical; }
.rl-campo input::placeholder { color: var(--apoio); opacity: 1; }   /* placeholder nunca faz o papel do rótulo */
.rl-campo .rl-ajuda-linha { margin: var(--e2) 0 0; font-size: var(--t-apoio); color: var(--apoio); }
.rl-campo.com-erro input, .rl-campo.com-erro select, .rl-campo.com-erro textarea { border-color: var(--rl-vermelho); box-shadow: 0 0 0 1px var(--rl-vermelho); }
.rl-campo .rl-erro-linha { margin: var(--e2) 0 0; font-weight: 600; font-size: 1.0625rem; color: var(--rl-vermelho); }
.rl-campo .rl-erro-linha::before { content: "Atenção: "; }

/* ---------------- cartão ---------------- */
.rl-cartao { background: var(--superficie); border-radius: var(--rl-raio-card); padding: var(--e5); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), var(--rl-sombra); }
.rl-cartao > :last-child { margin-bottom: 0; }

/* ---------------- aviso (erro, sucesso, informação): texto + ícone + cor ---------------- */
.rl-aviso {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start;
  padding: var(--e4) var(--e5); border-radius: var(--rl-raio); margin: 0 0 var(--e5);
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.rl-aviso::before {
  content: ""; width: 24px; height: 24px; margin-top: 2px; flex: none; background: currentColor;
  -webkit-mask: var(--rl-ico-info) center / contain no-repeat; mask: var(--rl-ico-info) center / contain no-repeat;
}
.rl-aviso > * { margin: 0; }
.rl-aviso strong { display: block; font-size: 1.125rem; }
.rl-aviso.erro { background: var(--rl-vermelho-fundo); color: var(--rl-vermelho); box-shadow: 0 0 0 1px rgba(215, 0, 21, .35); }
.rl-aviso.erro::before { -webkit-mask-image: var(--rl-ico-alerta); mask-image: var(--rl-ico-alerta); }
.rl-aviso.ok { background: var(--rl-fundo-cinza); box-shadow: none; }
.rl-aviso.ok::before { -webkit-mask-image: var(--rl-ico-ok); mask-image: var(--rl-ico-ok); }

/* ---------------- wizard: um passo por tela ----------------
 * Marcação (o servidor renderiza um passo por página; nada de estado escondido no componente):
 *   <section class="rl-wizard">
 *     <header class="rl-wiz-topo">
 *       <p class="rl-wiz-qual"><strong>Passo 2 de 5</strong> Conectar o Mercado Livre</p>
 *       <progress class="rl-progresso" max="5" value="2" aria-label="Passo 2 de 5">2 de 5</progress>
 *     </header>
 *     <div class="rl-wiz-corpo"> <h1>...</h1> <p class="rl-wiz-frase">O que é e por que precisa.</p> campos ... </div>
 *     <details class="rl-oque"><summary>O que é isso?</summary><p>Explicação curta.</p></details>
 *     <div class="rl-wiz-acoes"><a class="rl-btn grande" href="...">Voltar</a><button class="rl-btn primario grande">Continuar</button></div>
 *   </section> */
.rl-wizard { max-width: 720px; margin-inline: auto; padding: var(--e6) var(--e4) var(--e8); }
.rl-wiz-topo { margin-bottom: var(--e6); }
.rl-wiz-qual { margin: 0 0 var(--e3); font-size: 1.125rem; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.rl-wiz-qual strong { font-weight: 600; }
.rl-progresso { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; background: var(--rl-linha-fraca); color: var(--texto); border-radius: 999px; overflow: hidden; }
.rl-progresso::-webkit-progress-bar { background: var(--rl-linha-fraca); border-radius: 999px; }
.rl-progresso::-webkit-progress-value { background: var(--texto); border-radius: 999px; }
.rl-progresso::-moz-progress-bar { background: var(--texto); border-radius: 999px; }
.rl-wiz-corpo h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); }
.rl-wiz-frase { font-size: var(--t-lead); color: var(--texto-2); margin-bottom: var(--e6); }
.rl-oque { background: #fff; border-radius: var(--rl-raio); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); margin: var(--e6) 0; }
.rl-oque > summary { list-style: none; cursor: pointer; min-height: var(--rl-botao-h); display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); font-weight: 600; font-size: 1.125rem; border-radius: var(--rl-raio); }
.rl-oque > summary::-webkit-details-marker { display: none; }
.rl-oque > summary::before { content: "?"; display: grid; place-items: center; width: 30px; height: 30px; flex: none; font: 600 1.0625rem/1 var(--rl-sans); background: var(--rl-fundo-cinza); color: var(--texto); border-radius: 50%; }
.rl-oque[open] > summary::before { content: "\2212"; }   /* sinal de menos */
.rl-oque > :not(summary) { padding-inline: var(--e4); }
.rl-oque > p:last-child { padding-bottom: var(--e4); margin-bottom: 0; }
.rl-wiz-acoes { display: flex; gap: var(--e4); margin-top: var(--e6); }
.rl-wiz-acoes .rl-btn { flex: 1 1 0; }
.rl-passos { list-style: none; margin: 0 0 var(--e6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.rl-passos li { padding: var(--e2) var(--e4); border-radius: 999px; background: var(--rl-fundo-cinza); font-size: var(--t-apoio); color: var(--apoio); max-width: none; }
.rl-passos li[aria-current="step"] { color: #fff; background: var(--texto); font-weight: 600; }
.rl-passos li.feito::after { content: " (feito)"; }

/* ---------------- utilitários ---------------- */
.rl-container { width: min(100% - 2 * var(--e4), var(--rl-largura)); margin-inline: auto; }
.rl-pilha > * + * { margin-top: var(--e4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 520px) {
  .rl-wiz-acoes { flex-direction: column-reverse; }
  .rl-btn { white-space: normal; }
}
@media (forced-colors: active) {
  .rl-btn, .rl-campo input, .rl-cartao, .rl-aviso { border: 1px solid CanvasText; }
}