/**
 * DNA VISUAL "COPY" v13 PRO MAX ULTRA — DESIGN TOKENS
 * Projeto: Brooklyn Shop (Streetwear — Cândido Mota/SP)
 */

:root {
  /* Paleta Base Dark Imersiva Streetwear */
  --bg-deep: #060609;
  --bg-surface: #0A0A0F;
  --bg-card: rgba(14, 14, 20, 0.82);
  --bg-card-hover: rgba(20, 20, 28, 0.92);
  --bg-glass: rgba(16, 16, 24, 0.65);

  /* Vermelho Assinatura Streetwear (Extraído da faixa da Logo Oficial) */
  --accent-red: #D3232E;
  --accent-red-light: #E83B47;
  --accent-red-dark: #A61720; /* ~12% mais escuro */
  --accent-gradient: linear-gradient(135deg, #E83B47 0%, #D3232E 50%, #A61720 100%);
  --accent-glow: rgba(211, 35, 46, 0.35);
  --accent-glow-subtle: rgba(211, 35, 46, 0.12);

  /* Hierarquia Tipográfica de Cores (Contraste AA Validado) */
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D8;
  --text-muted: #8E8E98;
  --text-accent: #EA3E4A; /* Contraste 5.14:1 sobre #060609 (WCAG AA > 4.5:1) */

  /* Bordas e Delimitadores Sutis */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.10);
  --border-red-subtle: rgba(211, 35, 46, 0.22);
  --border-red-hover: rgba(211, 35, 46, 0.65);

  /* Sombras e Profundidade em Camadas (Padrão Banco Digital) */
  --shadow-elevation: 0 12px 32px -4px rgba(0, 0, 0, 0.65), 0 4px 12px -2px rgba(0, 0, 0, 0.45);
  --shadow-floating: 0 24px 64px -12px rgba(0, 0, 0, 0.85), 0 0 48px -8px rgba(211, 35, 46, 0.12);
  --shadow-card-hover: 0 16px 40px -8px rgba(0, 0, 0, 0.75), 0 0 24px -4px rgba(211, 35, 46, 0.25);

  /* Geometria e Raios */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Tipografia da Whitelist */
  --font-display: 'Archivo', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Animações e Transições Físicas (Spring Physics) */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  /* Largura Máxima do Canvas Central */
  --canvas-max-width: 440px;
}