/* Root CSS - Circula Aí */
:root {
  /* Colors from pallet.md */
  --color-black: #000000;
  --color-dark-blue-1: #005B74;
  --color-dark-blue-2: #005C74;
  --color-cyan-1: #00C8FF;
  --color-cyan-2: #00C9FF;
  --color-dark-blue-3: #044759;
  --color-blue: #19A0D3;
  --color-dark: #1D1D1B;
  --color-gray-1: #232323;
  --color-gray-2: #242424;
  --color-blue-2: #3B68BA;
  --color-cyan-3: #3CBADC;
  --color-cyan-4: #43BEDF;
  --color-green-1: #62663A;
  --color-green-2: #63BEA8;
  --color-green-3: #90C026;
  --color-green-4: #93C01F;
  --color-light-blue: #BDF1FF;
  --color-light-blue-alpha: rgba(189.21, 241.02, 255, 0.20);
  --color-red: #CF4E3F;
  --color-beige: #EBE3D2;
  --color-light-1: #F0FCFF;
  --color-orange-1: #F15A24;
  --color-orange-2: #F29100;
  --color-orange-3: #F29101;
  --color-light-2: #F2FAFC;
  --color-light-3: #F2FCFF;
  --color-light-4: #FAFDFE;
  --color-light-5: #FFF7F2;
  --color-white: #FFFFFF;

  /* Gradients */
  --gradient-cyan: linear-gradient(90deg, #3CBADC 0%, #96E9FF 100%);
  --gradient-orange: linear-gradient(200deg, #F29100 0%, #FFD392 100%);
  --gradient-white: linear-gradient(15deg, white 0%, white 100%);

  /* Typography */
  --font-primary: 'Afacad', sans-serif;
  --font-secondary: 'Changa', sans-serif;
  --font-tertiary: 'Barrio', cursive;
  --font-body: 'Inter', sans-serif;
  --font-special: 'Open Sans', sans-serif;
  --font-accent: 'Solway', serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* Border radius */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 100px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0px 4px 73.3px rgba(60, 186, 220, 0.24);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: auto; /* Safari não suporta smooth nativamente */
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-dark);
  /* background-color: var(--color-light-5); */
  overflow-x: hidden;
  /* Safari performance optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Utility classes */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container--full {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.font-bold {
  font-weight: 700;
}

.font-normal {
  font-weight: 400;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding: 0 var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
}