/* Atleta Store — tokens. Fonte de verdade: ../../../design-system.md */
:root {
  /* Paleta da marca: SÓ preto, branco e cinza. Nenhum matiz em lugar nenhum. */
  --preto-logo: #000000; /* fundo do logo */
  --preto: #0a0a0a;
  --g-900: #141414;
  --g-850: #1f1f1f;
  --g-800: #2a2a2a;
  --g-700: #3d3d3d;
  --g-600: #5c5c5c;
  --g-500: #7a7a7a;
  --g-400: #9a9a9a;
  --g-300: #c4c4c4;
  --g-200: #e4e4e4;
  --g-100: #f4f4f4;
  --branco: #ffffff;

  /* Papéis */
  --ink: var(--preto);
  --ink-2: var(--g-900);
  --ink-3: var(--g-850);
  --line: var(--g-800);
  --paper: var(--branco);
  --paper-2: var(--g-100);
  --paper-line: var(--g-200);
  --mute: var(--g-400);   /* texto secundário no escuro */
  --mute-2: var(--g-600); /* texto secundário no claro */
  --soft: var(--g-300);   /* texto de apoio no escuro */
  --line-ui: var(--g-500); /* limite de controle (campo, chip, contorno de botão): ≥3:1 no escuro e no claro */
  --placeholder: var(--g-400);
  --campo-fundo: var(--g-850);
  --campo-texto: var(--branco);

  /* Destaque contextual: no escuro (loja) é branco; no claro (painel) é preto. */
  --accent: var(--branco);
  --accent-ink: var(--preto);
  --focus: var(--branco);

  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Mrs Saint Delafield", cursive;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: clamp(28px, 5vw, 36px);
  --t-2xl: clamp(40px, 8vw, 64px);
  --t-3xl: clamp(56px, 14vw, 104px);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --sh-2: 0 20px 60px rgba(0,0,0,.45);

  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: var(--t-md); line-height: 1.5; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }
::placeholder { color: var(--placeholder); opacity: 1; }
/* Autocompletar do navegador pinta o campo de azul/amarelo; cobre com o fundo do campo. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--campo-texto);
  caret-color: var(--campo-texto);
  -webkit-box-shadow: 0 0 0 1000px var(--campo-fundo) inset;
  transition: background-color 99999s ease-out 0s;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  border: 1px solid transparent; font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1), background var(--dur-1), color var(--dur-1);
}
.btn:active { transform: scale(.97); }
.btn:hover { opacity: .88; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--solid { background: var(--g-700); color: var(--branco); }
.btn--ghost { background: transparent; border-color: var(--line-ui); }
.btn--ghost:hover { opacity: 1; background: rgba(128,128,128,.12); }
/* Ação destrutiva: sem cor — o rótulo e o diálogo de confirmação é que avisam. */
.btn--danger { background: transparent; color: inherit; border-color: var(--line-ui); border-style: dashed; }
.btn--danger:hover { opacity: 1; border-style: solid; }
.btn--sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--t-xs); }
.btn--lg { min-height: 56px; font-size: var(--t-md); }
.btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}