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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    /* Paleta de Cores Personalizada */
    --azul-petroleo: #003B42;    /* Azul Petróleo Escuro */
    --bege-claro: #F9F5EF;       /* Bege Claro */
    --branco: #FFFFFF;           /* Branco */
    --laranja-queimado: #E37C27; /* Laranja Queimado */
    --cinza-azulado: #4C5B5C;    /* Cinza Azulado */
    --bege-escuro: #EFDCC8;      /* Bege Escuro / Rosado */
    
    /* Variáveis Tailwind adaptadas */
    --background: 249 245 239;   /* #F9F5EF - Bege Claro */
    --foreground: 0 59 66;       /* #003B42 - Azul Petróleo */
    --card: 255 255 255;         /* #FFFFFF - Branco */
    --card-foreground: 0 59 66;  /* #003B42 - Azul Petróleo */
    --popover: 255 255 255;
    --popover-foreground: 0 59 66;
    --primary: 0 59 66;          /* #003B42 - Azul Petróleo */
    --primary-foreground: 255 255 255; /* #FFFFFF - Branco */
    --secondary: 239 220 200;    /* #EFDCC8 - Bege Escuro */
    --secondary-foreground: 0 59 66;
    --muted: 239 220 200;
    --muted-foreground: 76 91 92; /* #4C5B5C - Cinza Azulado */
    --accent: 227 124 39;        /* #E37C27 - Laranja Queimado */
    --accent-foreground: 255 255 255;
    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;
    --border: 239 220 200;       /* #EFDCC8 - Bege Escuro */
    --input: 239 220 200;
    --ring: 227 124 39;          /* #E37C27 - Laranja Queimado */
    --radius: 0.5rem;
  }
  
  .dark {
    --background: 0 59 66;       /* #003B42 - Azul Petróleo */
    --foreground: 249 245 239;   /* #F9F5EF - Bege Claro */
    --card: 0 59 66;
    --card-foreground: 249 245 239;
    --popover: 0 59 66;
    --popover-foreground: 249 245 239;
    --primary: 249 245 239;
    --primary-foreground: 0 59 66;
    --secondary: 76 91 92;       /* #4C5B5C - Cinza Azulado */
    --secondary-foreground: 249 245 239;
    --muted: 76 91 92;
    --muted-foreground: 156 163 175;
    --accent: 0 59 66;           /* #003B42 - Azul Petróleo */
    --accent-foreground: 0 59 66;
    --destructive: 239 68 68;
    --destructive-foreground: 249 245 239;
    --border: 76 91 92;
    --input: 76 91 92;
    --ring: 227 124 39;
  }
  
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
  }
  
  /* Tipografia */
  .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
  }
  
  .font-sans {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  /* Títulos principais */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--azul-petroleo);
    font-weight: 600;
  }
  
  h1 {
    font-size: 3rem;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 2.5rem;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 2rem;
    line-height: 1.4;
  }
  
  /* Barras de rolagem personalizadas */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--bege-claro);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--azul-petroleo);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--laranja-queimado);
  }
  
  /* Para Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--azul-petroleo) var(--bege-claro);
  }
  
  /* Animações personalizadas */
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Classes de animação */
  .animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
  }
  
  .animate-slideInLeft {
    animation: slideInLeft 0.6s ease-out;
  }
  
  .animate-slideInRight {
    animation: slideInRight 0.6s ease-out;
  }
  
  /* Melhorias de acessibilidade */
  .focus-visible:focus {
    outline: 2px solid var(--laranja-queimado);
    outline-offset: 2px;
  }
  
  /* Transições suaves para elementos interativos */
  .transition-all {
    transition: all 0.3s ease;
  }
  
  /* Sombras personalizadas com cores da paleta */
  .shadow-custom {
    box-shadow: 0 4px 6px -1px rgba(0, 59, 66, 0.1), 0 2px 4px -1px rgba(0, 59, 66, 0.06);
  }
  
  .shadow-custom-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 59, 66, 0.1), 0 4px 6px -2px rgba(0, 59, 66, 0.05);
  }
  
  .shadow-custom-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 59, 66, 0.1), 0 10px 10px -5px rgba(0, 59, 66, 0.04);
  }
  
  /* Gradientes personalizados */
  .bg-gradient-primary {
    background: linear-gradient(135deg, var(--bege-claro) 0%, var(--bege-escuro) 100%);
  }
  
  .bg-gradient-secondary {
    background: linear-gradient(135deg, var(--azul-petroleo) 0%, var(--cinza-azulado) 100%);
  }
  
  .bg-gradient-accent {
    background: linear-gradient(135deg, var(--laranja-queimado) 0%, var(--azul-petroleo) 100%);
  }
  
  /* Skip links para acessibilidade */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--azul-petroleo);
    color: var(--branco);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
  }
  
  .skip-link:focus {
    top: 6px;
  }
  
  /* Melhorias de contraste e legibilidade */
  .text-high-contrast {
    color: var(--azul-petroleo);
    font-weight: 600;
  }
  
  .bg-high-contrast {
    background-color: var(--azul-petroleo);
    color: var(--branco);
  }
  
  /* Estados de foco melhorados */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--laranja-queimado);
    outline-offset: 2px;
    border-radius: 4px;
  }
  
  /* Indicadores visuais para elementos interativos */
  .interactive-element {
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .interactive-element:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 59, 66, 0.15);
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Responsividade melhorada */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}