/* ===========================================================
   BARBEARIA BERTONHA — tokens de marca
   Fonte unica de verdade para o site, o painel e o estudio de design.
   =========================================================== */

:root {
  /* ---------- cor ---------- */
  --bt-navy:        #0a141c;   /* CMYK 96 / 79 / 57 / 81  — fundo institucional */
  --bt-navy-800:    #0f1d28;   /* superficies elevadas (cards, modais)          */
  --bt-navy-700:    #16283608; /* usar como overlay                              */
  --bt-gold:        #ba934e;   /* CMYK 24 / 38 / 74 / 13  — cor de acao          */
  --bt-gold-hover:  #cfa75e;
  --bt-gold-muted:  #7d6435;
  --bt-white:       #ffffff;
  --bt-ink-70:      rgba(255, 255, 255, .70);  /* texto secundario */
  --bt-ink-45:      rgba(255, 255, 255, .45);  /* legendas          */
  --bt-line:        rgba(186, 147, 78, .32);   /* bordas das caixas */

  /* estados */
  --bt-ok:      #3f9d6a;
  --bt-warn:    #c9922f;
  --bt-danger:  #b4453c;

  /* ---------- tipografia ---------- */
  /* Display: substituto livre da Olifant (fonte original e paga).
     Aplicar tracking de 1.5% para aproximar o ritmo da original.     */
  --bt-font-display: "Big Shoulders Display", "Saira Condensed", "Oswald",
                     system-ui, sans-serif;
  --bt-font-text:    "Source Sans 3", "Inter", system-ui, sans-serif;
  --bt-display-tracking: .015em;
  --bt-display-weight: 700;

  /* escala tipografica (1.25) */
  --bt-fs-xs:   .75rem;
  --bt-fs-sm:   .875rem;
  --bt-fs-base: 1rem;
  --bt-fs-lg:   1.25rem;
  --bt-fs-xl:   1.563rem;
  --bt-fs-2xl:  1.953rem;
  --bt-fs-3xl:  2.441rem;
  --bt-fs-4xl:  3.052rem;

  /* ---------- forma ---------- */
  /* a marca usa cantos generosos: caixas da tabela, barra do titulo, botoes */
  --bt-radius-sm:  10px;
  --bt-radius-md:  16px;
  --bt-radius-lg:  24px;
  --bt-radius-xl:  32px;
  --bt-radius-pill: 999px;

  /* ---------- espacamento (base 4) ---------- */
  --bt-space-1: 4px;   --bt-space-2: 8px;   --bt-space-3: 12px;
  --bt-space-4: 16px;  --bt-space-5: 24px;  --bt-space-6: 32px;
  --bt-space-7: 48px;  --bt-space-8: 64px;  --bt-space-9: 96px;

  /* ---------- elevacao ---------- */
  --bt-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --bt-shadow-2: 0 6px 20px rgba(0, 0, 0, .45);
  --bt-shadow-3: 0 18px 48px rgba(0, 0, 0, .55);

  /* ---------- movimento ---------- */
  --bt-ease: cubic-bezier(.22, .61, .36, 1);
  --bt-dur-fast: 120ms;
  --bt-dur: 220ms;
  --bt-dur-slow: 420ms;

  /* ---------- area segura (PWA em tela cheia) ---------- */
  --bt-safe-top:    env(safe-area-inset-top, 0px);
  --bt-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- primitivas ---------- */
.bt-display {
  font-family: var(--bt-font-display);
  font-weight: var(--bt-display-weight);
  letter-spacing: var(--bt-display-tracking);
  text-transform: uppercase;
}

.bt-tagline {                      /* "MAIS QUE UM CORTE, SUA ASSINATURA." */
  font-family: var(--bt-font-display);
  letter-spacing: .30em;
  color: var(--bt-gold);
  text-transform: uppercase;
}

.bt-btn {
  font-family: var(--bt-font-display);
  letter-spacing: var(--bt-display-tracking);
  text-transform: uppercase;
  background: var(--bt-gold);
  color: var(--bt-navy);
  border: 0;
  border-radius: var(--bt-radius-pill);
  padding: var(--bt-space-4) var(--bt-space-6);
  min-height: 48px;                /* alvo de toque confortavel */
  cursor: pointer;
  transition: background var(--bt-dur) var(--bt-ease),
              transform var(--bt-dur-fast) var(--bt-ease);
}
.bt-btn:hover  { background: var(--bt-gold-hover); }
.bt-btn:active { transform: translateY(1px); }
.bt-btn:focus-visible {
  outline: 3px solid var(--bt-gold-hover);
  outline-offset: 3px;
}

.bt-card {
  background: var(--bt-navy-800);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-space-5);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}