/* ============================================================
   Stellicar — Design System (tokens)
   Loja de acessorios de carro: dourado da marca + navy, moderno.
   Carregado pela landing e pelo checkout (mesmo dominio).
   ============================================================ */
:root {
  /* Marca / acao */
  --ds-brand: #F5B50A;        /* dourado — CTA, selecao, progresso */
  --ds-brand-dark: #D99A06;   /* dourado escuro — hover */
  --ds-brand-soft: #FDF3D0;   /* creme — fundos suaves / selecao */
  --ds-brand-text: #A87F08;   /* dourado escuro legivel sobre branco */
  --ds-on-brand: #0B121A;     /* texto sobre dourado */

  /* Acao / CTA — verde (compra/confianca). Identidade fica dourada. */
  --ds-action: #23A136;
  --ds-action-dark: #1C8A30;  /* hover */
  --ds-on-action: #FFFFFF;    /* texto sobre verde */
  --ds-action-soft: #E7F6EC;  /* fundo claro de selecao */
  --ds-action-text: #1C8A30;  /* verde escuro legivel sobre branco */

  /* Superficie / neutros */
  --ds-ink: #0B121A;          /* navy — texto principal / header */
  --ds-bg: #ffffff;
  --ds-muted: #64748B;        /* texto secundario */
  --ds-line: #E6E9EE;         /* bordas */
  --ds-soft: #F5F7F9;         /* fundos de input/chips */

  /* Estados semanticos */
  --ds-success: #12823B;      /* apenas confirmacoes reais (pagamento ok) */
  --ds-danger: #DC2626;

  /* Tipografia */
  --ds-font-display: "Barlow Condensed", system-ui, sans-serif;
  --ds-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Raios */
  --ds-r-sm: 10px;
  --ds-r-md: 14px;
  --ds-r-lg: 18px;
  --ds-r-pill: 999px;

  /* Sombras */
  --ds-shadow-sm: 0 1px 3px rgba(11, 18, 26, .08);
  --ds-shadow-md: 0 8px 24px rgba(11, 18, 26, .12);
  --ds-shadow-lg: 0 20px 60px rgba(11, 18, 26, .22);
}

/* Botoes utilitarios do design system (uso nos componentes nativos) */
.ds-btn {
  border: none;
  border-radius: var(--ds-r-md);
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease, transform .12s ease, background .15s ease;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--ds-brand); color: var(--ds-on-brand); }
.ds-btn--primary:hover { background: var(--ds-brand-dark); }
.ds-btn--dark { background: var(--ds-ink); color: #fff; }
.ds-btn--ghost { background: var(--ds-soft); color: var(--ds-ink); }
.ds-btn:disabled { background: #CBD5E1; color: #fff; cursor: not-allowed; }

/* Pulso de atencao (anel dourado expandindo) — equivalente ao "ping" do widget */
@keyframes ds-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(35, 161, 54, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(35, 161, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 161, 54, 0); }
}
.ds-pulse { animation: ds-pulse 1.8s cubic-bezier(.66, 0, 0, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .ds-pulse { animation: none; } }