/*
 * BodyMetrics - Sistema de Variáveis de Design
 * Define paletas HSL, gradientes, tipografia e estilos Glassmorphism.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Fontes */
  --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Tema Escuro Premium (Padrão) */
  --bg-app: hsl(222, 47%, 8%);
  --bg-surface: hsla(223, 47%, 12%, 0.75);
  --bg-surface-opaque: hsl(223, 47%, 12%);
  --bg-card: hsla(223, 47%, 16%, 0.45);
  --bg-card-hover: hsla(223, 47%, 20%, 0.6);
  
  --border-glass: hsla(223, 100%, 100%, 0.08);
  --border-focus: hsla(262, 80%, 60%, 0.5);

  --text-primary: hsl(210, 40%, 98%);
  --text-secondary: hsl(215, 20%, 75%);
  --text-muted: hsl(215, 16%, 50%);

  /* Cores de Destaque */
  --primary: hsl(142, 70%, 45%);        /* Emerald */
  --primary-hover: hsl(142, 70%, 38%);
  --primary-glow: hsla(142, 70%, 45%, 0.15);

  --secondary: hsl(262, 83%, 58%);      /* Electric Violet */
  --secondary-hover: hsl(262, 83%, 50%);
  --secondary-glow: hsla(262, 83%, 58%, 0.15);

  --accent: hsl(190, 90%, 50%);         /* Cyan */

  /* Estados */
  --success: hsl(142, 76%, 36%);
  --error: hsl(350, 89%, 60%);
  --warning: hsl(45, 93%, 47%);
  --info: hsl(200, 95%, 48%);

  /* Gradientes */
  --grad-primary: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  --grad-surface: linear-gradient(135deg, hsla(223, 47%, 14%, 0.8) 0%, hsla(222, 47%, 9%, 0.8) 100%);
  --grad-premium: linear-gradient(135deg, hsl(262, 83%, 58%) 0%, hsl(190, 90%, 50%) 100%);

  /* Sombras e Efeitos */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 16px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 0 10px 20px -10px rgba(0, 0, 0, 0.7);
  --blur-glass: blur(18px);

  /* Dimensões */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tema Claro (Disparado via classe .theme-light) */
body.theme-light {
  --bg-app: hsl(210, 40%, 96%);
  --bg-surface: hsla(210, 40%, 100%, 0.8);
  --bg-surface-opaque: hsl(210, 40%, 100%);
  --bg-card: hsla(210, 40%, 93%, 0.5);
  --bg-card-hover: hsla(210, 40%, 90%, 0.7);

  --border-glass: hsla(222, 47%, 8%, 0.08);
  --border-focus: hsla(262, 83%, 58%, 0.3);

  --text-primary: hsl(222, 47%, 12%);
  --text-secondary: hsl(215, 25%, 35%);
  --text-muted: hsl(215, 16%, 55%);

  --primary: hsl(142, 76%, 36%);
  --primary-hover: hsl(142, 76%, 30%);
  --primary-glow: hsla(142, 76%, 36%, 0.1);

  --secondary: hsl(262, 83%, 50%);
  --secondary-hover: hsl(262, 83%, 45%);
  --secondary-glow: hsla(262, 83%, 50%, 0.1);

  --grad-surface: linear-gradient(135deg, hsla(210, 40%, 100%, 0.9) 0%, hsla(210, 40%, 96%, 0.9) 100%);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}