/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║          BERT BIKE STORE — DESIGN SYSTEM TOKENS v1.0            ║
 * ║          Industrial Dark / Precision Marketplace                  ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * Como usar:
 *   1. Copie o bloco :root + @theme + @keyframes para o globals.css do projeto
 *   2. Para Tailwind v4, inclua também o bloco @theme inline
 *   3. Fonts: Poppins (Google Fonts, pesos 400/500/600/700) + Oxanium (local TTF)
 */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────── */
  --bb-bg:               #0a0a0a;   /* Corpo da página */
  --bb-footer:           #111111;   /* Footer */
  --bb-card:             #1a1a1a;   /* Cards, painéis */
  --bb-nav:              #222222;   /* Navbar, surfaces */
  --bb-surface:          #222222;   /* Superfícies gerais */
  --bb-surface-elevated: #2a2a2a;   /* Dropdowns, tooltips, menus */
  --bb-surface-overlay:  rgba(0, 0, 0, 0.65); /* Backdrop de modais */

  /* ── Borders ─────────────────────────────────────────────────── */
  --bb-border:           #2c2c2c;   /* Borda padrão */
  --bb-border-subtle:    #1e1e1e;   /* Borda suave */
  --bb-border-strong:    #3a3a3a;   /* Borda acentuada */
  --bb-border-accent:    #f5c518;   /* Borda dourada */

  /* ── Brand / Accent ──────────────────────────────────────────── */
  --bb-accent:           #f5c518;   /* Dourado primário */
  --bb-accent-hover:     #d4a800;   /* Hover */
  --bb-accent-active:    #b89000;   /* Pressed */
  --bb-accent-tint:      rgba(245, 197, 24, 0.10);
  --bb-accent-tint-hover:rgba(245, 197, 24, 0.16);
  --bb-accent-glow:      rgba(245, 197, 24, 0.20);

  /* ── Text ────────────────────────────────────────────────────── */
  --bb-heading:          #f8f8f8;   /* Headings, labels primários */
  --bb-body:             #cccccc;   /* Texto padrão */
  --bb-muted:            #888888;   /* Subtítulos, metadados */
  --bb-disabled:         #555555;   /* Elementos desativados */
  --bb-on-accent:        #1a1a1a;   /* Texto sobre fundo dourado */
  --bb-link:             #f5c518;   /* Links inline */
  --bb-link-hover:       #d4a800;   /* Links inline hover */

  /* ── Status — Ativo (green) ──────────────────────────────────── */
  --bb-active-bg:        rgba(34, 197, 94, 0.12);
  --bb-active-text:      #4ade80;
  --bb-active-border:    rgba(34, 197, 94, 0.30);

  /* ── Status — Pendente (yellow) ─────────────────────────────── */
  --bb-pending-bg:       rgba(234, 179, 8, 0.12);
  --bb-pending-text:     #facc15;
  --bb-pending-border:   rgba(234, 179, 8, 0.30);

  /* ── Status — Pausado / Neutro ───────────────────────────────── */
  --bb-paused-bg:        #2c2c2c;
  --bb-paused-text:      #888888;
  --bb-paused-border:    #3a3a3a;

  /* ── Status — Vendido (purple) ───────────────────────────────── */
  --bb-sold-bg:          rgba(168, 85, 247, 0.12);
  --bb-sold-text:        #c084fc;
  --bb-sold-border:      rgba(168, 85, 247, 0.30);

  /* ── Status — Expirado (red) ─────────────────────────────────── */
  --bb-expired-bg:       rgba(239, 68, 68, 0.12);
  --bb-expired-text:     #f87171;
  --bb-expired-border:   rgba(239, 68, 68, 0.30);

  /* ── Semântico — Error ───────────────────────────────────────── */
  --bb-error-bg:         rgba(239, 68, 68, 0.10);
  --bb-error-text:       #fca5a5;
  --bb-error-border:     rgba(239, 68, 68, 0.30);

  /* ── Semântico — Success ─────────────────────────────────────── */
  --bb-success-bg:       rgba(34, 197, 94, 0.10);
  --bb-success-text:     #86efac;
  --bb-success-border:   rgba(34, 197, 94, 0.30);

  /* ── Semântico — Warning ─────────────────────────────────────── */
  --bb-warning-bg:       rgba(245, 158, 11, 0.10);
  --bb-warning-text:     #fcd34d;
  --bb-warning-border:   rgba(245, 158, 11, 0.30);

  /* ── Semântico — Info ────────────────────────────────────────── */
  --bb-info-bg:          rgba(59, 130, 246, 0.10);
  --bb-info-text:        #93c5fd;
  --bb-info-border:      rgba(59, 130, 246, 0.30);

  /* ── Integrações ─────────────────────────────────────────────── */
  --bb-whatsapp:         #25D366;
  --bb-whatsapp-hover:   #22c55e;

  /* ── Tipografia — Famílias ───────────────────────────────────── */
  --bb-font-sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --bb-font-brand: 'Oxanium', 'Oxanium fallback', sans-serif;
  --bb-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  /* ── Tipografia — Escala ─────────────────────────────────────── */
  --bb-text-2xs:  0.625rem;   /* 10px */
  --bb-text-xs:   0.75rem;    /* 12px */
  --bb-text-sm:   0.875rem;   /* 14px */
  --bb-text-base: 1rem;       /* 16px */
  --bb-text-lg:   1.125rem;   /* 18px */
  --bb-text-xl:   1.25rem;    /* 20px */
  --bb-text-2xl:  1.5rem;     /* 24px */
  --bb-text-3xl:  1.875rem;   /* 30px */
  --bb-text-4xl:  2.25rem;    /* 36px */
  --bb-text-5xl:  3rem;       /* 48px */

  /* ── Tipografia — Pesos ──────────────────────────────────────── */
  --bb-weight-regular:  400;
  --bb-weight-medium:   500;
  --bb-weight-semibold: 600;
  --bb-weight-bold:     700;

  /* ── Tipografia — Line Heights ───────────────────────────────── */
  --bb-leading-none:    1;
  --bb-leading-tight:   1.25;
  --bb-leading-snug:    1.375;
  --bb-leading-normal:  1.5;
  --bb-leading-relaxed: 1.625;
  --bb-leading-loose:   2;

  /* ── Tipografia — Letter Spacing ─────────────────────────────── */
  --bb-tracking-tight:   -0.025em;
  --bb-tracking-normal:  0em;
  --bb-tracking-wide:    0.025em;
  --bb-tracking-wider:   0.05em;
  --bb-tracking-widest:  0.1em;

  /* ── Border Radius ───────────────────────────────────────────── */
  --bb-radius-xs:   0.25rem;    /* 4px  — badges pequenos */
  --bb-radius-sm:   0.375rem;   /* 6px  — inputs compactos */
  --bb-radius-md:   0.5rem;     /* 8px  — buttons, inputs */
  --bb-radius-lg:   0.75rem;    /* 12px — cards */
  --bb-radius-xl:   1rem;       /* 16px — cards maiores */
  --bb-radius-2xl:  1.5rem;     /* 24px — modais, hero cards */
  --bb-radius-full: 9999px;     /* Pills, avatares circulares */

  /* ── Sombras ─────────────────────────────────────────────────── */
  --bb-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.3);
  --bb-shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.4);
  --bb-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.5);
  --bb-shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.6);
  --bb-shadow-xl:         0 16px 48px rgba(0, 0, 0, 0.7);
  --bb-shadow-accent:     0 0 0 1px #f5c518;
  --bb-shadow-accent-ring:0 0 0 3px rgba(245, 197, 24, 0.25);
  --bb-shadow-accent-glow:0 4px 20px rgba(245, 197, 24, 0.20);

  /* ── Transições ──────────────────────────────────────────────── */
  --bb-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --bb-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --bb-duration-fast:   150ms;
  --bb-duration-base:   200ms;
  --bb-duration-slow:   300ms;
  --bb-duration-slower: 500ms;
  --bb-transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index ─────────────────────────────────────────────────── */
  --bb-z-base:     0;
  --bb-z-raised:   10;
  --bb-z-dropdown: 100;
  --bb-z-sticky:   200;
  --bb-z-overlay:  300;
  --bb-z-modal:    400;
  --bb-z-toast:    500;
  --bb-z-tooltip:  600;

  /* ── Layout ──────────────────────────────────────────────────── */
  --bb-container-sm:  640px;
  --bb-container-md:  768px;
  --bb-container-lg:  1024px;
  --bb-container-xl:  1280px;
  --bb-container-2xl: 1440px;

  /* ── Componentes ─────────────────────────────────────────────── */
  --bb-navbar-height:       5rem;     /* 80px */
  --bb-category-bar-height: 2.5rem;   /* 40px */
  --bb-sidebar-width:       17.5rem;  /* 280px */
}

/* ── Tailwind v4 @theme ──────────────────────────────────────────────
   Cole este bloco junto com o :root acima no globals.css do projeto
   ─────────────────────────────────────────────────────────────────── */
@theme inline {
  /* Backgrounds */
  --color-bb-bg:               var(--bb-bg);
  --color-bb-card:             var(--bb-card);
  --color-bb-nav:              var(--bb-nav);
  --color-bb-surface:          var(--bb-surface);
  --color-bb-surface-elevated: var(--bb-surface-elevated);

  /* Borders */
  --color-bb-border:           var(--bb-border);
  --color-bb-border-subtle:    var(--bb-border-subtle);
  --color-bb-border-strong:    var(--bb-border-strong);
  --color-bb-border-accent:    var(--bb-border-accent);

  /* Accent */
  --color-bb-accent:           var(--bb-accent);
  --color-bb-accent-hover:     var(--bb-accent-hover);
  --color-bb-accent-tint:      var(--bb-accent-tint);
  --color-bb-on-accent:        var(--bb-on-accent);

  /* Text */
  --color-bb-heading:          var(--bb-heading);
  --color-bb-body:             var(--bb-body);
  --color-bb-muted:            var(--bb-muted);
  --color-bb-disabled:         var(--bb-disabled);

  /* Status */
  --color-bb-active:           var(--bb-active-text);
  --color-bb-pending:          var(--bb-pending-text);
  --color-bb-sold:             var(--bb-sold-text);
  --color-bb-expired:          var(--bb-expired-text);

  /* Semantic */
  --color-bb-error:            var(--bb-error-text);
  --color-bb-success:          var(--bb-success-text);
  --color-bb-warning:          var(--bb-warning-text);
  --color-bb-info:             var(--bb-info-text);

  /* Integrations */
  --color-bb-whatsapp:         var(--bb-whatsapp);
  --color-bb-whatsapp-hover:   var(--bb-whatsapp-hover);

  /* Typography */
  --font-brand: var(--bb-font-brand);
  --font-mono:  var(--bb-font-mono);
}

/* ── Animações globais ─────────────────────────────────────────────── */

/* Skeleton shimmer */
@keyframes bb-shimmer {
  to { transform: translateX(200%); }
}

/* Fade in up (para toasts, alertas, etc.) */
@keyframes bb-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in simples */
@keyframes bb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in (para modais) */
@keyframes bb-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Spin (para spinners) — Tailwind já tem animate-spin, mas incluído para projetos sem Tailwind */
@keyframes bb-spin {
  to { transform: rotate(360deg); }
}

/* Pulse suave */
@keyframes bb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}