/**
 * Design Tokens — Barba Men 2026 High-End DTC Grooming
 * Balm Multifuncional com Nanotecnologia (120ml)
 * Deep Obsidian Forest, Emerald Nanotech Glow & Matte Champagne
 * Rigoroso respeito às regras Impeccable UI: Zero roxo/violeta, zero cinzas puros.
 */

:root {
  /* Cores de Fundo com Infusão Deep Obsidian (Impeccable Rule #3) */
  --bg-main: #060907;
  --bg-surface: #0B100D;
  --bg-surface-elevated: #101713;
  --bg-card: rgba(16, 25, 20, 0.65);
  --bg-card-hover: rgba(22, 35, 28, 0.85);
  --bg-card-active: rgba(26, 42, 33, 0.95);
  --bg-glass: rgba(14, 22, 17, 0.60);
  
  /* Verde Nanotecnologia / Emerald Ativo */
  --brand-mint: #00F59B;
  --brand-mint-light: #4EFEB3;
  --brand-mint-dark: #00B36E;
  --brand-mint-subtle: rgba(0, 245, 155, 0.10);
  --brand-mint-glow: rgba(0, 245, 155, 0.25);

  /* Verde Floresta Clínico & Cosmecêutico */
  --brand-emerald-dark: #0F261A;
  --brand-emerald: #1A4730;
  --brand-emerald-vibrant: #236545;

  /* Champanhe Acetinado Nobre (Substituto contemporâneo ao dourado vintage) */
  --brand-champagne: #E4D5B7;
  --brand-champagne-light: #F5EFE0;
  --brand-champagne-subtle: rgba(228, 213, 183, 0.12);
  --brand-champagne-border: rgba(228, 213, 183, 0.28);
  --brand-champagne-glow: rgba(228, 213, 183, 0.18);

  /* Tipografia & Contrastes Tintados */
  --text-primary: #FFFFFF;
  --text-secondary: #D2DDD6;
  --text-muted: #96A89F;
  --text-dim: #86998F;
  --text-inverse: #060907;

  /* Bordas de Precisão Milimétrica (1px Hairlines) */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.13);
  --border-highlight: rgba(0, 245, 155, 0.35);
  --border-champagne: rgba(228, 213, 183, 0.30);

  /* Vidro Jateado / Glassmorphism */
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-sm: blur(12px);

  /* Tipografia Impeccable (Outfit Display + Plus Jakarta Sans Body) */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala de Espaçamento Tipográfico (Anti-Grudado / Respiração Óptica) */
  --tracking-tighter: -0.01em;
  --tracking-tight: -0.005em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.03em;
  --tracking-widest: 0.04em;

  --leading-tight: 1.32;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.72;

  /* Dimensões & Spacing */
  --container-max: 1200px;
  --container-narrow: 860px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Sombras Atmosféricas & Profundidade */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 14px rgba(0, 0, 0, 0.65);
  --shadow-mint-glow: 0 8px 14px rgba(0, 0, 0, 0.55);
  --shadow-card-elevated: 0 8px 14px rgba(0, 0, 0, 0.55);

  /* Animações Fluidas (Zero bounce infantil) */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}