/* 
  _theme.css
  Design System Global Baseado em Material Design 3 (Dark Mode)
  Variáveis, Cores, Tipografia e Shapes unificados.
*/

:root {
  /* Core Colors */
  --md-sys-color-primary: #3b82f6; /* Azul premium vibrante */
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #1e3a8a;
  --md-sys-color-on-primary-container: #d3e3fd;
  
  /* Background & Surface (Identidade Visual Escura da Landing Page) */
  --md-sys-color-background: #0b0c10;
  --md-sys-color-on-background: #e2e2e6;
  --md-sys-color-surface: #121318;
  --md-sys-color-on-surface: #e2e2e6;
  --md-sys-color-surface-variant: #1d1f27;
  --md-sys-color-on-surface-variant: #a1a8b9;
  --md-sys-color-outline: #4d5160;
  --md-sys-color-outline-variant: #282a35;
  
  /* Status Colors */
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-success: #10b981;
  
  /* Redes Sociais */
  --color-instagram: #E1306C;
  --color-facebook: #1877F2;
  --color-tiktok: #00f2fe; /* cyan vibrante */
  --color-threads: #ffffff;
  --color-metaads: #0668E1;
  --color-youtube: #FF0000;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Elevations */
  --elevation-1: 0px 4px 20px rgba(0, 0, 0, 0.4);
  --elevation-2: 0px 8px 30px rgba(0, 0, 0, 0.6);
  
  /* Shapes */
  --shape-small: 8px;
  --shape-medium: 12px;
  --shape-large: 16px;
  --shape-extra-large: 28px;
}

/* Reset Global & Fonts */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.4s ease-out;
}

body.page-fade-out {
  opacity: 0;
}