/* Academia Bio Sport — marca base (etapa 1). PROPOSTA NÃO OFICIAL: a academia ainda não foi contatada.
   Fonte única das cores, fontes e medidas para o site e o cartão. Mudou aqui, muda em DESIGN.md.
   Cores medidas nas artes da própria academia (Instagram @academiabiosport, 11/11/2026):
   laranja das tarjas e fundos = #FC6400; verde das tarjas "novidade/agora" = #5BFC36; fundo preto dos posts.
   Contraste WCAG 2.2 medido (fórmula de luminância relativa) — tabela completa em DESIGN.md §2. */

:root {
  /* ---------- Cores de marca (valores) ---------- */
  --bio-preto: #0E0E0E;          /* borracha do piso; fundo dos posts */
  --bio-grafite: #1C1C1C;        /* superfície elevada (cards, faixas) */
  --bio-aco: #2A2A28;            /* linha decorativa; NÃO serve de borda de campo (1,34:1) */
  --bio-fumaca: #9C9A93;         /* texto secundário no escuro: 6,86:1 no preto, 6,05:1 no grafite */
  --bio-giz: #F4F2EC;            /* texto no escuro (17,24:1) e fundo claro (a folha dos posts) */
  --bio-branco: #FFFFFF;
  --bio-laranja: #FC6400;        /* cor da marca: 6,40:1 sobre o preto */
  --bio-laranja-texto: #B34500;  /* laranja para TEXTO sobre o giz: 4,98:1 */
  --bio-verde: #5BFC36;          /* sinal "agora/novidade": só com texto preto (14,18:1); nunca em área grande */

  /* ---------- Papéis (use estes no site e no cartão) ---------- */
  --cor-fundo: var(--bio-preto);
  --cor-superficie: var(--bio-grafite);
  --cor-linha: var(--bio-aco);
  --cor-borda-campo: var(--bio-fumaca);      /* borda de input/controle: precisa de 3:1 */
  --cor-texto: var(--bio-giz);
  --cor-texto-suave: var(--bio-fumaca);
  --cor-destaque: var(--bio-laranja);        /* botão principal, linha do piso, números */
  --cor-sobre-destaque: var(--bio-preto);    /* texto em cima do laranja: 6,40:1 */
  --cor-sinal: var(--bio-verde);             /* "aberto agora", "novidade", foco */
  --cor-sobre-sinal: var(--bio-preto);
  --cor-foco: var(--bio-verde);              /* anel de foco no escuro (14,18:1) */
  --cor-fundo-claro: var(--bio-giz);         /* seção clara: o "papel" dos posts */
  --cor-texto-sobre-claro: var(--bio-preto);
  --cor-destaque-sobre-claro: var(--bio-laranja-texto);
  --cor-foco-sobre-claro: var(--bio-preto);
  /* Branco sobre laranja = 3,02:1 → só título de 24 px ou mais (como nos posts); nunca texto corrido. */

  /* ---------- Tipografia (fontes SIL OFL 1.1, conferidas no google/fonts) ---------- */
  --fonte-display: "Anton", "Arial Narrow", Impact, sans-serif;           /* títulos, números, tarjas */
  --fonte-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* texto, botões, rótulos */
  --peso-texto: 400;
  --peso-forte: 700;
  --peso-rotulo: 800;
  --largura-rotulo: 125%;          /* font-stretch (eixo wdth do Archivo): rótulos largos ("ACADEMIA") */
  --largura-texto: 100%;
  --rotulo-tracking: 0.14em;

  /* escala fluida: título do hero ≈ 6–10 × o texto */
  --fs-hero: clamp(4rem, 1.4rem + 10.5vw, 10.5rem);
  --fs-h2: clamp(2.5rem, 1.3rem + 5vw, 5.5rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-numero: clamp(3rem, 2rem + 4vw, 6rem);   /* horários, preços, "28" */
  --fs-texto: 1.0625rem;
  --fs-texto-grande: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-rotulo: .8125rem;
  --lh-display: .9;
  --lh-titulo: 1.05;
  --lh-texto: 1.55;
  --medida: 62ch;

  /* ---------- Espaço (base 8) ---------- */
  --esp-1: 4px;  --esp-2: 8px;   --esp-3: 12px; --esp-4: 16px;  --esp-5: 24px;
  --esp-6: 32px; --esp-7: 48px;  --esp-8: 64px; --esp-9: 96px;  --esp-10: 128px;
  --secao: clamp(64px, 6vw + 40px, 160px);    /* respiro vertical entre seções */
  --margem: clamp(16px, 5vw, 80px);           /* margem lateral, igual dos dois lados */
  --gutter: clamp(16px, 2vw, 24px);
  --largura-max: 1320px;
  --colunas: 12;

  /* ---------- Formas ---------- */
  --raio-0: 0;            /* tarjas, fotos, cards: canto reto, como as placas do piso */
  --raio-campo: 4px;      /* inputs */
  --raio-pilula: 999px;   /* botões (o "Veja mais →" dos posts) */
  --linha-piso: 6px;      /* espessura da linha laranja sob títulos e na assinatura */
  --borda: 1px;

  /* ---------- Profundidade ---------- */
  --sombra-1: inset 0 1px 0 rgb(255 255 255 / .06), 0 8px 24px rgb(0 0 0 / .45);
  --sombra-2: inset 0 1px 0 rgb(255 255 255 / .08), 0 24px 64px rgb(0 0 0 / .6);
  --sombra-claro: 0 12px 32px rgb(14 14 14 / .14);

  /* ---------- Motion ---------- */
  --curva-saida: cubic-bezier(.16, 1, .3, 1);       /* entradas: chega rápido e assenta */
  --curva-vai-volta: cubic-bezier(.65, 0, .35, 1);  /* transições de estado */
  --curva-peso: cubic-bezier(.34, 1.36, .64, 1);    /* "anilha caindo": leve passo além, só em destaque */
  --t-rapido: 160ms;      /* hover, foco */
  --t-medio: 320ms;       /* estados, menus */
  --t-lento: 700ms;       /* revelação de seção, título por linhas */
  --t-escalonado: 70ms;   /* intervalo entre itens (60–90 ms) */
  --hover-subida: -2px;
  --zoom-foto: 1.03;

  /* ---------- Texturas (opacidade 2–4 % por cima das fotos e fundos) ---------- */
  --textura-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --textura-meio-tom: radial-gradient(circle at center, var(--bio-laranja) 0 32%, transparent 34%) 0 0 / 12px 12px;
  --opacidade-grao: .035;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-medio: 1ms;
    --t-lento: 1ms;
    --t-escalonado: 0ms;
    --hover-subida: 0px;
    --zoom-foto: 1;
  }
}