/* ========================================
   DESIGN TOKENS — Felipe MXD
   ======================================== */

:root {
  /* === CORES === */
  
  /* Base */
  --bg-primary: #09090B;
  --bg-secondary: #111116;
  --bg-surface: #18181F;
  
  /* Texto */
  --text-primary: #F8FAFC;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  
  /* Acento (Roxo) */
  --accent-primary: #8B5CF6;
  --accent-hover: #7C3AED;
  --accent-light: #A78BFA;
  --accent-dark: #6D28D9;
  --accent-accessible: #9D6FFF; /* Contraste WCAG AA para texto sobre backgrounds escuros */
  
  /* Borders */
  --border-subtle: rgba(248, 250, 252, 0.08);
  --border-accent: rgba(139, 92, 246, 0.3);
  
  /* === TIPOGRAFIA === */
  
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 
                 'Helvetica Neue', sans-serif;
  
  /* Desktop */
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 28px;
  --font-size-h4: 24px;
  --font-size-body: 18px;
  --font-size-small: 16px;
  --font-size-xs: 14px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* === ESPAÇAMENTO === */
  
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  
  /* === VISUAL === */
  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  --shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 20px rgba(139, 92, 246, 0.3);
  
  /* === TRANSIÇÕES === */
  
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;
  
  /* === LAYOUT === */
  
  --container-max: 1200px;
  --section-padding-y: 96px;
  --header-height: 72px;
}

/* === MOBILE === */

@media (max-width: 767px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body: 16px;
    --font-size-small: 15px;
    
    --section-padding-y: 56px;
    --header-height: 64px;
  }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
    --transition-slower: 0.01ms;
  }
}