/* =====================================================================
   IDENTIDADE VISUAL
   Garagem: grafite, laranja de sinalização, metal. Nada de cinza de
   escritório — é loja de moto.
   ===================================================================== */
/* As fontes são da própria loja — veja fontes/fontes.css. */
@import url('/fontes/fontes.css');

:root {
  --fundo: #f6f7f9;
  --papel: #ffffff;
  --papel-2: #fbfbfc;
  --borda: #e3e7ec;
  --texto: #10171f;
  --suave: #637184;

  --marca: #f26419;          /* laranja de sinalização */
  --marca-escura: #c84d0d;
  --marca-fraca: #fff0e8;
  --grafite: #1b222c;

  --ok: #0f9d58;
  --ok-fraco: #e6f6ee;
  --alerta: #d98324;
  --perigo: #d93b30;
  /* Âmbar de aviso: a faixa de venda guardada no aparelho e o selo de
     pedido esperando. Era consumida em 13 arquivos sem nunca ser definida,
     e a faixa ficava invisível no tema escuro. */
  --destaque: #f2a81e;
  --destaque-texto: #15120e;

  --raio: 12px;
  --raio-g: 18px;
  --sombra: 0 1px 2px rgba(16,23,31,.05), 0 4px 14px rgba(16,23,31,.06);
  --sombra-alta: 0 8px 30px rgba(16,23,31,.13);
  --titulo: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0d1117;
    --papel: #161b22;
    --papel-2: #1b222c;
    --borda: #2a333f;
    --texto: #e8eef5;
    --suave: #8b9bb0;
    --marca: #ff7a33;
    --marca-escura: #f26419;
    --marca-fraca: #2b1a10;
    --grafite: #0a0e13;
    --ok: #3ac77f;
    --ok-fraco: #10291e;
    --alerta: #e8a23c;
    --perigo: #ff6b5e;
    --destaque: #e8a23c;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
    --sombra-alta: 0 10px 34px rgba(0,0,0,.5);
  }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .titulo-forte {
  font-family: var(--titulo);
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Marca ------------------------------------------------------------- */
.logo {
  font-family: var(--titulo);
  font-size: 23px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.logo::before {
  content: ''; width: 7px; height: 25px; border-radius: 3px;
  background: linear-gradient(180deg, var(--marca), var(--marca-escura));
}
.logo span { color: var(--marca); }

/* Botões ------------------------------------------------------------- */
.btn-principal, .p-add, .fechar {
  background: linear-gradient(180deg, var(--marca), var(--marca-escura));
  border: 0; color: #fff; font-weight: 700; cursor: pointer;
  border-radius: var(--raio); transition: transform .12s, filter .12s, box-shadow .12s;
  box-shadow: 0 2px 8px rgba(242,100,25,.3);
}
.btn-principal:hover, .p-add:hover, .fechar:hover {
  filter: brightness(1.07); transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(242,100,25,.38);
}
.btn-principal:active, .p-add:active { transform: translateY(0); }
.btn-principal:disabled { opacity: .55; transform: none; box-shadow: none; }

/* Chips de moto ------------------------------------------------------ */
.moto-chip {
  border-radius: 999px; font-weight: 600; transition: all .14s;
  border: 1.5px solid var(--borda);
}
.moto-chip:hover { border-color: var(--marca); color: var(--marca); }
.moto-chip[aria-pressed="true"] {
  background: var(--grafite); border-color: var(--grafite); color: #fff;
}
.moto-chip[aria-pressed="true"] small { color: var(--marca); opacity: 1; font-weight: 700; }

/* Cartões ------------------------------------------------------------ */
.item, .cartao, .bloco, .rev-item, .produto, .nota-cab {
  box-shadow: var(--sombra);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.item:hover, .produto:hover { box-shadow: var(--sombra-alta); }

/* Etiquetas ---------------------------------------------------------- */
.tag {
  font-weight: 700; letter-spacing: .2px;
  text-transform: uppercase; font-size: 11px;
}

/* Formulário dentro de diálogo: grid de duas colunas vira sopa em
   largura de modal. Uma coluna, rótulo em cima do campo. */
dialog .campos { grid-template-columns: 1fr; gap: 11px; }
dialog .campo > span { display: block; margin-bottom: 3px; }
@media (min-width: 560px) {
  dialog .campos { grid-template-columns: 1fr 1fr; }
  dialog .campo.grande { grid-column: 1 / -1; }
}
dialog { max-width: 460px; }