/* ============================================================
   opedro. — Design System v1 · playground.css
   Componentes vivos do case Design System (só em designsystem.html).
   Tudo usa os tokens de tokens.css: um [data-theme] no palco troca
   o tema inteiro sem nenhuma cor no JS.
   Componentes trazidos do guia: segmented button, text field,
   switch, banner e snackbar.
   ============================================================ */

/* ---------- Moldura da demo */
.demo {
  margin-top: var(--space-12); border: 1px solid var(--outline-faint); border-radius: var(--radius-xl);
  background: var(--surface-low); overflow: hidden;
}
.demo__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  padding: 14px 20px; border-bottom: 1px solid var(--outline-faint);
}
.demo__hint { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 14px/1.4 var(--font-sans); color: var(--on-surface-var); }
.demo__hint .icon { font-size: 20px; color: var(--on-surface-dim); }
.demo__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.demo__stage {
  position: relative; min-height: 440px; padding: clamp(24px, 4vw, 48px);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-low); color: var(--on-surface);
  transition: background var(--dur-normal) var(--ease-standard), color var(--dur-normal) var(--ease-standard);
}
.demo__stage--short { min-height: 300px; }
.demo__aside {
  padding: clamp(20px, 3vw, 32px); border-left: 1px solid var(--outline-faint);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.demo__aside > p { margin: 0; font-size: var(--type-body-s); line-height: 1.6; color: var(--on-surface-var); }
.demo__label { display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--font-sans); color: var(--on-surface-var); cursor: pointer; }

/* ---------- Segmented button — escolha exclusiva; selecionado é container, não primário */
.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: var(--radius-full); overflow: hidden; }
.seg button {
  height: 40px; padding: 0 18px; border: 0; background: transparent; gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--type-label)/1 var(--font-sans); color: var(--on-surface-var); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.seg button + button { border-left: 1px solid var(--outline); }
.seg button:hover { background: var(--hover); }
.seg button:focus-visible { outline: none; }
.seg button[aria-checked="true"] { background: var(--primary-container); color: var(--on-primary-container); }
.seg button .icon { font-size: 18px; }
.seg button:not([aria-checked="true"]) .icon { display: none; }
.seg:has(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Switch — aplica na hora */
.switch {
  width: 48px; height: 28px; flex: none; border-radius: var(--radius-full); padding: 3px; cursor: pointer; position: relative;
  background: var(--surface-high); border: 1px solid var(--outline-var);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.switch::before { content: ""; position: absolute; inset: -10px -2px; }
.switch::after {
  content: ""; display: block; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--outline); transition: transform var(--dur-fast) var(--ease-standard);
}
.switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.switch[aria-checked="true"]::after { background: var(--on-primary); width: 22px; height: 22px; margin-top: -1px; transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---------- Text field — rótulo sempre acima; erro com quatro sinais */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field label { font: 500 13px/1.3 var(--font-sans); color: var(--on-surface-var); }
.field__control { position: relative; }
.field input {
  width: 100%; height: 44px; padding: 0 44px 0 14px; border: 1px solid var(--outline); border-radius: var(--radius-md);
  background: var(--surface); color: var(--on-surface); font: 400 var(--type-body-s)/1 var(--font-sans);
}
.field input:hover { border-color: var(--on-surface-var); }
.field input:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.field:focus-within label { color: var(--primary-text); }
.field input[aria-invalid="true"] { border: 2px solid var(--error); padding-left: 13px; }
.field:has([aria-invalid="true"]) label,
.field:has([aria-invalid="true"]) .field__help { color: var(--on-error-container); }
.field__help { display: flex; align-items: center; gap: 6px; min-height: 17px; font-size: 12px; line-height: 1.4; color: var(--on-surface-dim); }
.field__help .icon { font-size: 16px; }
.field__status[hidden] { display: none; }
.field__status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--success); pointer-events: none; }

/* ---------- Banner e snackbar */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid; text-align: left; }
.banner .icon { font-size: 18px; margin-top: 1px; }
.banner p { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: inherit; }
.banner--info { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.snackbar {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 12px 8px 12px 16px; border-radius: 10px; background: var(--on-surface); color: var(--surface); box-shadow: var(--e2);
  display: flex; align-items: center; gap: 12px; font: 400 14px/1.4 var(--font-sans);
}
.snackbar[hidden] { display: none; }
.snackbar button { height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-full); background: none; color: var(--primary-container); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.snackbar button:hover { background: color-mix(in srgb, var(--surface) 12%, transparent); }

/* ============================================================
   Demo 1 — tokens e temas
   ============================================================ */
#theme-stage { padding-bottom: 96px; }
.mini { width: 100%; max-width: 400px; gap: 16px; padding: 24px; background: var(--surface); text-align: left; }
.mini__head { display: flex; align-items: center; justify-content: space-between; }
.mini .mini__title { margin: 0; font: 600 20px/1.3 var(--font-sans); color: var(--on-surface); }
.mini__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--type-body-s); color: var(--on-surface); }
.mini__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.toks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tok { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--outline-faint); }
.tok__sw { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--outline-var); transition: background var(--dur-normal) var(--ease-standard); }
.tok__name { font: 500 13px/1.3 var(--font-mono); color: var(--on-surface); overflow-wrap: anywhere; }
.tok__val { font: 400 13px/1 var(--font-mono); color: var(--on-surface-dim); font-variant-numeric: tabular-nums; }

/* ============================================================
   Demo 2 — hierarquia de botões
   ============================================================ */
.ranks { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-8) var(--space-4); }
.rank { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rank__n { font: 400 40px/1 var(--font-serif); color: var(--on-surface-dim); }
.rank p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--on-surface-var); max-width: 18ch; }
.show-targets .btn::before { border-radius: inherit; outline: 1px dashed var(--violet-500); }

.state { display: flex; flex-direction: column; gap: 6px; }
.state__name { font: 400 44px/1 var(--font-serif); letter-spacing: var(--tracking-serif); color: var(--on-surface); }
.state__variant { font: 600 14px/1.3 var(--font-sans); color: var(--on-surface); }
.state__token { font: 400 13px/1.5 var(--font-mono); color: var(--on-surface-var); }

/* ============================================================
   Demo 3 — campo com validação
   ============================================================ */
.form-demo { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.form-demo .btn { align-self: flex-start; }

.signals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sig {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--outline-faint); opacity: .45; transition: opacity var(--dur-normal) var(--ease-standard);
}
.sig.is-on { opacity: 1; }
.sig__mark { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--outline-faint); color: var(--error); }
.sig__mark--color i { width: 18px; height: 18px; border-radius: 999px; background: var(--error); }
.sig__mark--border i { width: 22px; height: 16px; border-radius: 5px; border: 2px solid var(--error); }
.sig__mark--text { font: 600 14px/1 var(--font-sans); }
.sig strong { display: block; font: 600 14px/1.3 var(--font-sans); color: var(--on-surface); }
.sig span { font-size: 13px; line-height: 1.4; color: var(--on-surface-var); }

/* ---------- Responsivo */
@media (max-width: 860px) {
  .demo__body { grid-template-columns: 1fr; }
  .demo__aside { border-left: 0; border-top: 1px solid var(--outline-faint); }
  .demo__stage { min-height: 0; }
}
@media (max-width: 640px) {
  .demo__bar { padding: 14px 16px; }
  .demo__bar .seg { width: 100%; }
  .seg button { flex: 1; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .seg__more { display: none; }
  .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo__stage { padding: 32px 16px 88px; }
  .demo__stage--short { padding-bottom: 32px; }
}