/* =========================================================
   LAYOUT BASE Variáveis
   ========================================================= */


:root {
  /* Paleta de Cores */
  --color-primary-900: #0c1d34;
  /* Azul escuro profundo */
  --color-primary-700: #193050;
  /* Azul médio */
  --color-primary-500: #d1c6c5;
  /* Cinza claro quente */
  --color-primary-300: #9e8886;
  /* Bege rosado */
  --color-primary-100: #f4f3ee;
  /* Off-white */
  --color-primary-50: #e8f4f8;

  /* Superfícies e texto */
  --surface-base: #ffffff;
  --surface-elevated: #faf9f7;
  --surface-hover: #eae6e4;
  --border-color: var(--color-primary-500);



  /* Cores Semânticas */
  --color-surface: #ffffff;
  --color-surface-elevated: #F5FAFE;
  --color-surface-hover: #bfd9f2;
  --color-text-primary: #0c1d34;
  --color-text-secondary: #193050;
  --color-text-muted: #9e8886;
  --color-border: #d1c6c5;
  --color-border-light: #f4f3ee;

  --surface-base: #ffffff;
  --surface-elevated: #F5FAFE;
  --surface-hover: #bfd9f2;
  --text-primary: #0c1d34;
  --text-secondary: #9e8886;
  --border-primary: var(--color-primary-500);
  --border-light: #D0E8F5;

  /* Tipografia */
  --font-primary: 'Yeseva One', serif;
  --font-secondary: 'Lato', sans-serif;
  --text-xs: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --text-sm: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-base: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.35rem + 0.8vw, 2rem);


  /*  Espaçamento e Transições */
  --radius-sm: 8px;
  --radius-base: 8px;
  --border-radius: 0.5rem;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Espaçamento e efeitos */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;



  /* Sombras */
  --shadow-sm: 0 2px 4px var(--color-primary-900);
  --shadow-md: 0 4px 8px var(--color-primary-900);
  --shadow-md2: 0 6px 16px rgba(12, 29, 52, 0.1);
  --shadow-lg: 0 8px 16px var(--color-primary-900);
  --shadow-focus: 0 0 0 3px var(--color-primary-900);

  /* container-premios */
  --largura-maxima: 1200px;
  --max-width: 1200px;
  --largura-texto: 800px;

  /* Espaçamentos */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-2xs: 0.25rem;
  --space-3xl: 5rem;
  --space-4xl: 6rem;

  /* Tamanhos de fonte responsivos */
  --texto-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --texto-sm: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  --h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
  --h3: clamp(1.35rem, 1.25rem + 0.5vw, 1.75rem);
  --h2: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);
  --h1: clamp(2rem, 1.75rem + 1.25vw, 3rem);



  /* Pesos da fonte Lato */
  --peso-thin: 100;
  --peso-light: 300;
  --peso-regular: 400;
  --peso-bold: 700;
  --peso-black: 900;

  /* Transições */
  --transition: all 0.3s ease;
  --transition-nav: max-height 0.4s ease;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Opacidades padronizadas */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.95;
  --opacity-subtle: 0.8;
  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;

  /* Gradientes reutilizáveis */
  --gradient-primary-azul: linear-gradient(195deg, var(--color-primary-700) 0%, var(--color-primary-50) 100%);
  --gradient-primary-bege-claro: linear-gradient(195deg, var(--color-primary-500) 0%, var(--color-primary-100) 100%);
  --gradient-primary-bege: linear-gradient(195deg, var(--color-primary-300) 0%, var(--color-primary-100) 100%);
  --gradient-primary-azul-escuro: linear-gradient(195deg, var(--color-primary-900) 0%, var(--color-primary-50) 100%);

  --gradient-primary: linear-gradient(195deg, var(--color-primary-50) 0%, var(--color-primary-700) 100%);

  --gradient-icon: linear-gradient(135deg, var(--color-primary-300) 0%, var(--color-primary-700) 100%);
  --gradient-icon-dark: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900));

  /* Backgrounds com transparência */
  --bg-card-glass: rgba(255, 255, 255, 0.97);
  --bg-hover-light: var(--color-primary-50);

  /* Bordas */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-focus-width: 2px;
  --border-quote: 4px;

  --font-display: var(--font-primary);

  /* títulos */
  --font-body: var(--font-secondary);
  /* texto comum */
  --letter-tight: -0.02em;
  --letter-relaxed: 0.01em;
  --line-compact: 1.2;
  --line-relaxed: 1.5;

  --font-heading: var(--font-display, 'Poppins', sans-serif);
  --font-body: var(--font-body, 'Inter', sans-serif);

  --peso-regular: 400;
  --peso-bold: 700;
  --peso-black: 800;

  --line-compact: 1.2;
  --line-relaxed: 1.6;

  --letter-tight: -0.02em;
  --letter-relaxed: 0.01em;

  --transition-base: 0.3s ease;

  /* Escala tipográfica fluida */
  --h1: clamp(2rem, 5vw, 3rem);
  --h2: clamp(1.75rem, 4vw, 2.5rem);
  --h3: clamp(1.5rem, 3vw, 2rem);
  --h4: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-base: clamp(1rem, 2vw, 1.125rem);

  /* Espaçamentos unificados */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;

  /* Cores baseadas em seu sistema */
  --color-text-primary: var(--color-primary-700);
  --color-text-secondary: var(--color-primary-300);

}

/* =========================================================
   RESET BÁSICO E BASE TIPOGRÁFICA
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-secondary);
  font-weight: 200;
  line-height: 1.0;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  overflow-x: hidden;

}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mt-lg {
  margin-top: var(--space-lg);
}