/* ===========================================================================
   DESIGN TOOLS — componentes comuns
   Carregue depois do base.css. Cada ferramenta pode ajustar tamanho e posição,
   mas a aparência dos dois estilos mora aqui.

   Classes:
     .btn  .btn-primary  .btn-quiet  .btn-perigo  .btn-icon  .btn-sm
     .seg > button[aria-pressed]          seletor segmentado
     .chip[aria-pressed]                  filtro
     input.campo  textarea.campo          campo de dado
     [popover]  .cfg-titulo  .cfg-linha   menu de configurações
     .rotulo                              rótulo pequeno
     .marca                               nome "Design Tools"
     .pontilhado                          fundo de pontos (Nothing)
   =========================================================================== */

/* ------------------------------- botões ------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px;
  border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-size:var(--t-sm); font-weight:500; line-height:1; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
}
.btn:hover{border-color:var(--ink-3)}
.btn:active{opacity:.7}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--primary-ink)}
.btn-primary:hover{border-color:var(--primary); opacity:.88}
.btn-quiet{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-quiet:hover{background:var(--surface-2); border-color:var(--line)}
.btn-perigo{border-color:transparent; background:transparent; color:var(--red-text)}
.btn-perigo:hover{background:var(--red-soft); border-color:transparent}
.btn-icon{width:36px; padding:0}
.btn-sm{height:28px; padding:0 9px; font-size:var(--t-xs)}

/* -------------------------------- campos ------------------------------- */
input.campo, textarea.campo{
  min-width:0; height:32px; padding:0 10px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--line-2); color:var(--ink); font-size:var(--t-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea.campo{height:auto; min-height:64px; padding:8px 10px; resize:vertical; line-height:1.5; width:100%}
input.campo:hover, textarea.campo:hover{border-color:var(--ink-3)}
input.campo:focus, textarea.campo:focus{outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px color-mix(in oklab, var(--ink) 9%, transparent)}
.campo::placeholder{color:var(--ink-3)}

/* --------------------------- seg, chip, rótulo -------------------------- */
.seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:2px}
.seg button{
  min-width:70px; height:28px; padding:0 10px; border:0; background:none; border-radius:calc(var(--r-md) - 3px);
  cursor:pointer; color:var(--ink-3); font-size:var(--t-sm); transition:background .2s var(--ease), color .2s var(--ease);
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}

.chip{
  height:30px; padding:0 10px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--ink-2); font-size:var(--t-xs); cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease);
}
.chip b{font-weight:500; color:var(--ink-3); margin-left:4px}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--surface); border-color:var(--line-2); color:var(--ink); box-shadow:var(--shadow-1)}

.rotulo{font-size:var(--t-xs); font-weight:500; color:var(--ink-3)}
.marca{font-family:var(--display); font-weight:600; color:var(--ink-display); letter-spacing:-.02em}

/* ---------------------------- configurações ---------------------------- */
[popover]{
  margin:0; inset:auto; padding:10px; min-width:260px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--shadow-3);
}
.cfg-titulo{font-size:var(--t-micro); color:var(--ink-3); padding:2px 4px 8px}
.cfg-linha{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:6px 4px}
.cfg-linha > span{font-size:var(--t-sm); color:var(--ink-2)}


/* ===========================================================================
   NOTHING
   Instrumento, não aplicativo: rótulos em Space Mono caixa-alta, botões em
   pílula, nada de sombra nem brilho; o foco e o hover acendem a borda.
   =========================================================================== */
:root[data-estilo="nothing"] h1,
:root[data-estilo="nothing"] h2,
:root[data-estilo="nothing"] h3{font-weight:500; letter-spacing:-.01em}

/* a "voz" de instrumento: tudo que é rótulo, botão ou metadado */
:root[data-estilo="nothing"] :is(.btn, .seg button, .chip, .rotulo, .cfg-titulo, .cfg-linha > span){
  font-family:var(--mono); font-weight:400; text-transform:uppercase; letter-spacing:.07em;
}

:root[data-estilo="nothing"] .btn{
  padding:0 18px; border-radius:999px; font-size:12px;
  background:transparent; border-color:var(--line-2); color:var(--ink);
}
:root[data-estilo="nothing"] .btn:hover{border-color:var(--ink-display); color:var(--ink-display)}
:root[data-estilo="nothing"] .btn:active{opacity:.6}
:root[data-estilo="nothing"] .btn-primary{background:var(--ink-display); border-color:var(--ink-display); color:var(--bg)}
:root[data-estilo="nothing"] .btn-primary:hover{color:var(--bg); opacity:.82}
:root[data-estilo="nothing"] .btn-quiet{border-color:transparent; color:var(--ink-3)}
:root[data-estilo="nothing"] .btn-quiet:hover{background:transparent; border-color:transparent; color:var(--ink-display)}
:root[data-estilo="nothing"] .btn-perigo{border-color:var(--red); color:var(--red-text)}
:root[data-estilo="nothing"] .btn-perigo:hover{background:var(--red-soft); border-color:var(--red); color:var(--red-text)}
:root[data-estilo="nothing"] .btn-icon{padding:0}
:root[data-estilo="nothing"] .btn-sm{padding:0 12px; font-size:11px}

:root[data-estilo="nothing"] input.campo,
:root[data-estilo="nothing"] textarea.campo{border-radius:var(--r-sm); border-color:var(--line-2)}
:root[data-estilo="nothing"] input.campo:hover,
:root[data-estilo="nothing"] textarea.campo:hover{border-color:var(--ink-3)}
:root[data-estilo="nothing"] input.campo:focus,
:root[data-estilo="nothing"] textarea.campo:focus{border-color:var(--ink-display); box-shadow:none}
:root[data-estilo="nothing"] .campo::placeholder{color:var(--ink-3)}

:root[data-estilo="nothing"] .seg{background:transparent; border-color:var(--line-2); border-radius:999px}
:root[data-estilo="nothing"] .seg button{border-radius:999px; font-size:11px}
:root[data-estilo="nothing"] .seg button[aria-pressed="true"]{background:var(--ink-display); color:var(--bg); box-shadow:none}

:root[data-estilo="nothing"] .chip{border-color:var(--line-2); color:var(--ink-3); font-size:11px; padding:0 12px}
:root[data-estilo="nothing"] .chip b{font-weight:400; color:inherit; opacity:.7; margin-left:6px}
:root[data-estilo="nothing"] .chip:hover{color:var(--ink); border-color:var(--ink-3)}
:root[data-estilo="nothing"] .chip[aria-pressed="true"]{background:transparent; border-color:var(--ink-display); color:var(--ink-display); box-shadow:none}

:root[data-estilo="nothing"] .rotulo,
:root[data-estilo="nothing"] .cfg-titulo,
:root[data-estilo="nothing"] .cfg-linha > span{font-size:11px; color:var(--ink-3)}
:root[data-estilo="nothing"] .marca{font-family:var(--mono); font-weight:400; font-size:12px; text-transform:uppercase; letter-spacing:.14em}

:root[data-estilo="nothing"] [popover]{background:var(--surface-2); border-radius:var(--r-md); padding:12px}

:root[data-estilo="nothing"] .pontilhado{
  background-image:radial-gradient(circle, var(--line-2) 1px, transparent 1px); background-size:16px 16px;
}