/* dot. laser — fundação visual (Fase 0)
   Fonte única de cor e tipografia para home, admin, painel, login e vendedor.
   Regra do acento: --dot é o ponto vermelho do laser (e o ponto do logotipo).
   Ele só aparece em marcas pequenas e em anel de foco — nunca preenche botão,
   nunca vira gradiente. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Claro = padrão. É a cor de uma medalha de alumínio antes da gravação, e é o
   único tema legível no sol das 5h30 da manhã com o brilho do celular baixo. */
:root {
  --bg: #e8e9eb;
  --card: #ffffff;
  --text: #000000;
  --muted: #5a5f66;
  --line: #c9ccd1;
  --accent: #000000;
  --dot: #ff3b21;
  --ok: #0f7a3d;
  --warn: #8a5a00;
  --danger: #c02617;
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Forma e elevação no jeito do shadcn/ui (usadas por assets/ui.css).
     rgba literal, não color-mix: iPhone preso no iOS 15 ainda abre o cadastro. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --field: transparent;
  --hover: rgba(0,0,0,.05);
  --ring: rgba(255,59,33,.4);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0a0b0c;
  --card: #141517;
  --text: #f2f3f4;
  --muted: #9aa0a6;
  --line: #2a2d31;
  --accent: #ffffff;
  --dot: #ff4b33;
  --ok: #3ddc97;
  --warn: #ffd36a;
  --danger: #ff6b6b;
  --field: rgba(255,255,255,.03);
  --hover: rgba(255,255,255,.07);
  --ring: rgba(255,75,51,.5);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.5);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Dados que a equipe lê em voz alta na fila — código do pedido, tempo de prova,
   número de peito — precisam alinhar coluna a coluna. */
input, select, textarea, .code, .rcode, .focusCode, .metric b, .counter, time {
  font-variant-numeric: tabular-nums;
}

/* A placa. É o que o laser faz: remove o anodizado preto e expõe o alumínio
   claro por baixo. Aparece no cadastro, no comprovante e no painel da equipe —
   sempre a mesma coisa, para o atleta e para quem grava conferirem o mesmo texto. */
.plate{background:#17191c;border-radius:3px;padding:20px 18px;box-shadow:0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.55)}
.plate-line{font-stretch:115%;font-weight:600;font-size:clamp(19px,5.4vw,27px);letter-spacing:.055em;line-height:1.3;color:#e2e6e9;text-shadow:0 1px 0 rgba(255,255,255,.09),0 -1px 1px rgba(0,0,0,.5);white-space:pre-line;overflow-wrap:anywhere}
.plate.is-empty .plate-line{color:#6d747b;text-shadow:none}
.plate-note{margin:9px 0 18px;font-size:13px;color:var(--muted)}
.plate-note::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dot);margin-right:7px;vertical-align:middle}

:focus-visible {
  outline: 2px solid var(--dot);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}