/* Fontes hospedadas no próprio servidor */
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/rajdhani-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/cinzel-latin-700-normal.woff2') format('woff2'); }

/* Tokens compartilhados — app do aluno e painel do personal */
:root {
  --giz: #F3F5F4;          /* fundo: parede de academia pintada de branco giz */
  --papel: #FFFFFF;        /* superfícies que recebem GIF (fundo branco dos GIFs) */
  --grafite: #24282C;      /* texto: piso emborrachado */
  --cinza: #5E666D;        /* texto secundário */
  --linha: #DDE2E0;        /* bordas */
  --ferro: #C9CFCC;        /* anilha vazia */
  --marca: #FF5A1F;        /* cor do personal — sobrescrita em runtime */
  --marca-texto: #FFFFFF;
  --ok: #1F8A5B;
  --alerta: #B4321F;
  --raio-s: 8px;
  --raio-m: 14px;
  --sombra: 0 1px 2px rgba(36, 40, 44, .06), 0 4px 16px rgba(36, 40, 44, .06);
  --fonte: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--giz);
  color: var(--grafite);
  font: 400 16px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--fonte-cond); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
a { color: inherit; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--raio-s);
  background: var(--grafite); color: #fff;
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { background: var(--giz); color: #A3AAA6; box-shadow: inset 0 0 0 1px var(--linha); cursor: default; }
.btn-marca { background: var(--marca); color: var(--marca-texto); }
.btn-claro { background: var(--papel); color: var(--grafite); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-texto { background: none; color: var(--grafite); padding: 0 8px; min-height: 40px; }
.btn-perigo { background: none; color: var(--alerta); box-shadow: inset 0 0 0 1px currentColor; }
.btn-bloco { width: 100%; }

.campo { display: grid; gap: 6px; }
.campo > span { font-size: 14px; font-weight: 600; color: var(--cinza); }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-s);
  background: var(--papel); outline: none;
}
.input:focus { border-color: var(--grafite); box-shadow: 0 0 0 1px var(--grafite); }
textarea.input { min-height: 96px; resize: vertical; }

.erro-msg { color: var(--alerta); font-size: 14px; min-height: 1.2em; }
.vazio { color: var(--cinza); text-align: center; padding: 40px 16px; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--grafite); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-weight: 600; z-index: 100; transition: .25s ease; pointer-events: none; max-width: calc(100% - 32px);
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

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