/* Best Bro — tokens do design system
   Fonte: _ds/best-bro-design-system-.../tokens/ (colors, glass, typography,
   spacing, shape, motion, base). Archivo e Archivo Black pelo Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  /* ---------- primitivas ---------- */
  --bb-ink: #0B0B0B;
  --bb-cream: #F4F1EC;
  --bb-white: #FFFFFF;
  --bb-ink-80: rgba(11, 11, 11, 0.8);
  --bb-ink-60: rgba(11, 11, 11, 0.6);
  --bb-ink-45: rgba(11, 11, 11, 0.45);
  --bb-ink-35: rgba(11, 11, 11, 0.35);
  --bb-ink-18: rgba(11, 11, 11, 0.18);
  --bb-ink-14: rgba(11, 11, 11, 0.14);
  --bb-ink-08: rgba(11, 11, 11, 0.08);
  --bb-cream-60: rgba(244, 241, 236, 0.6);

  /* ---------- ação: preto age, vermelho identifica ---------- */
  --bb-color-action: #0B0B0B;
  --bb-color-action-press: #000000;
  --bb-color-action-fg: #FFFFFF;
  --bb-color-action-inverse: #FFFFFF;
  --bb-color-action-inverse-press: #E6E2DC;
  --bb-color-action-inverse-fg: #0B0B0B;

  /* marca e situação nunca são o mesmo vermelho */
  --bb-color-brand: #FF3B30;
  --bb-color-critical: #C6261C;
  --bb-color-critical-press: #A81F17;
  --bb-color-critical-fg: #FFFFFF;

  /* peso da leitura — três níveis de tinta; só "pare" tem cor */
  --bb-gravity-1: rgba(11, 11, 11, 0.45);
  --bb-gravity-2: rgba(11, 11, 11, 0.7);
  --bb-gravity-3: #0B0B0B;
  --bb-reading-stop: #C6261C;
  --bb-reading-stop-fg: #FFFFFF;

  /* ---------- superfícies ---------- */
  --bb-surface-base: #F4F1EC;
  --bb-surface-sunken: #EDE9E2;
  --bb-surface-raised: #FFFFFF;
  --bb-surface-dark: #0B0B0B;
  --bb-surface-dark-raised: #161616;
  --bb-surface-solid: #FFFFFF;
  --bb-border-subtle: #D6D1C9;
  --bb-border-strong: #0B0B0B;

  /* ---------- texto (secundário e terciário são proibidos sobre vidro) ---------- */
  --bb-text-primary: #0B0B0B;
  --bb-text-secondary: #6B6560;
  --bb-text-tertiary: #A8A29A;
  --bb-text-on-dark: #FFFFFF;
  --bb-text-on-dark-secondary: rgba(255, 255, 255, 0.72);

  /* bolhas: sempre sólidas */
  --bb-bubble-her: var(--bb-surface-raised);
  --bb-bubble-him: rgba(11, 11, 11, 0.12);

  --bb-disabled-bg: #D6D1C9;
  --bb-disabled-fg: #A8A29A;
  --bb-focus-ring: var(--bb-color-action);

  /* aliases antigos, ainda lidos pelo fluxo */
  --bb-surface-card: var(--bb-surface-raised);
  --bb-border: var(--bb-border-subtle);
  --bb-accent: var(--bb-color-action);

  /* ---------- material: três níveis, e só sobre conteúdo que rola ---------- */
  --bb-glass-thin-light: rgba(244, 241, 236, 0.62);
  --bb-glass-regular-light: rgba(244, 241, 236, 0.76);
  --bb-glass-thick-light: rgba(244, 241, 236, 0.88);
  --bb-glass-filter-thin: blur(16px) saturate(160%);
  --bb-glass-filter-regular: blur(24px) saturate(180%);
  --bb-glass-filter-thick: blur(32px) saturate(180%);
  --bb-glass-border-light: rgba(255, 255, 255, 0.58);
  --bb-glass-ring-light: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(11, 11, 11, 0.06);
  --bb-glass-padding-min: 16px;

  --bb-scrim-light: rgba(244, 241, 236, 0.6);
  --bb-scrim-dark: rgba(11, 11, 11, 0.4);
  --bb-scrim-blur: 8px;

  --bb-shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
  --bb-shadow-md: 0 8px 24px -8px rgba(11, 11, 11, 0.18);
  --bb-shadow-lg: 0 -8px 40px -12px rgba(11, 11, 11, 0.22);

  /* ---------- espaço ---------- */
  --bb-space-1: 4px;  --bb-space-2: 8px;  --bb-space-3: 12px;
  --bb-space-4: 16px; --bb-space-5: 24px; --bb-space-6: 32px;
  --bb-space-7: 48px; --bb-space-8: 64px; --bb-space-9: 88px;
  --bb-gutter: 20px;
  /* Alvo mínimo em 48, não mais 44: era o conflito C1 entre o brief (48) e
     o sistema (44). Decisão de 30 set 2026. Com isso o mínimo e o padrão
     viram o mesmo número. */
  --bb-tap-min: 48px;
  --bb-tap-default: 48px;
  /* Botão grande e campo em 56. O sistema dizia 52 e as telas de entrar, 54.
     Decisão de 30 set 2026 (D1). */
  --bb-control-height: 56px;
  --bb-row-height: 56px;

  /* ---------- forma: raio interno = raio externo − folga ---------- */
  --bb-radius-xs: 8px;  --bb-radius-sm: 12px; --bb-radius-md: 16px;
  --bb-radius-lg: 24px; --bb-radius-xl: 28px; --bb-radius-2xl: 32px;
  --bb-radius-pill: 999px;
  --bb-radius-card: var(--bb-radius-lg);
  --bb-radius-field: var(--bb-radius-md);
  --bb-radius-sheet: var(--bb-radius-xl);
  --bb-radius-screen: 44px;
  --bb-border-width-outline: 1.5px;
  --bb-border-width-focus: 2px;

  /* ---------- tipografia: rem, e caixa alta só no logo ---------- */
  --bb-font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --bb-font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --bb-weight-regular: 400;
  --bb-weight-medium: 500;
  --bb-weight-semibold: 600;
  /* Título: quatro degraus e nenhum outro. O sistema no Claude Design ainda
     diz 64/44/30/20; o produto usava oito tamanhos, e só o 30 estava na
     escala. Decisão de 30 set 2026 (D7). */
  --bb-size-display-xl: 2.5rem;   /* 40 */
  --bb-size-display-l: 2rem;      /* 32 */
  --bb-size-display-m: 1.5rem;    /* 24 */
  --bb-size-display-s: 1.25rem;   /* 20 */
  --bb-size-label: 0.8125rem;
  --bb-size-body-l: 1.125rem;
  --bb-size-body: 1rem;
  --bb-size-body-s: 0.875rem;
  --bb-size-caption: 0.8125rem;
  --bb-leading-display: 0.92;
  --bb-leading-title: 1.1;
  --bb-leading-body: 1.55;
  /* inclinação da marca: barras e nome, os dois a 10,25° */
  --bb-skew: -10.25deg;

  /* ---------- movimento: nunca linear, exceto o indicador de leitura ---------- */
  --bb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --bb-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --bb-duration-instant: 120ms;
  --bb-duration-fast: 200ms;
  --bb-duration-medium: 280ms;
  --bb-duration-slow: 360ms;
  --bb-duration-layer: 420ms;
  --bb-duration-reduced: 100ms;
  --bb-duration-loop: 2000ms;
  --bb-loop-stagger: 1120ms;
  --bb-press-scale: 0.97;

  /* curva herdada do fluxo, usada nas transições de camada */
  --bb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bb-dur-fade: 150ms;
}

/* ---------- utilitários de material ---------- */

.bb-glass-thin, .bb-glass-regular, .bb-glass-thick {
  border: 1px solid var(--bb-glass-border-light);
  box-shadow: var(--bb-glass-ring-light), var(--bb-shadow-md);
  color: var(--bb-text-primary);
}
.bb-glass-thin { background: var(--bb-glass-thin-light); -webkit-backdrop-filter: var(--bb-glass-filter-thin); backdrop-filter: var(--bb-glass-filter-thin); }
.bb-glass-regular { background: var(--bb-glass-regular-light); -webkit-backdrop-filter: var(--bb-glass-filter-regular); backdrop-filter: var(--bb-glass-filter-regular); }
.bb-glass-thick { background: var(--bb-glass-thick-light); -webkit-backdrop-filter: var(--bb-glass-filter-thick); backdrop-filter: var(--bb-glass-filter-thick); }

/* Sem backdrop-filter, a superfície vira sólida — mesma cor, raio e sombra. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bb-glass-thin, .bb-glass-regular, .bb-glass-thick { background: var(--bb-surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .bb-glass-thin, .bb-glass-regular, .bb-glass-thick {
    background: var(--bb-surface-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---------- animações do sistema ---------- */

@keyframes bbBarra { 0% { transform: translateY(-3px); } 50% { transform: translateY(3px); } 100% { transform: translateY(-3px); } }
@keyframes bbBarra2 { 0% { transform: translateY(-3.3px); } 50% { transform: translateY(3.3px); } 100% { transform: translateY(-3.3px); } }
@keyframes bbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes bbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bbRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Movimento reduzido: posição e escala viram um fade de 100 ms. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-bb-osc], .barras path {
    animation: bbPulse 1200ms var(--bb-ease-standard) infinite !important;
    animation-duration: 1200ms !important;
    animation-iteration-count: infinite !important;
    transform: none !important;
  }
}