@layer base {
  :root {
    /* Primary Light */
    --primary-light-darkest: #1a6166;
    --primary-light-darker: #2199a1;
    --primary-light-dark: #22a4aa;
    --primary-light-base: #25aeb7;
    --primary-light-light: #37ced7;
    --primary-light-lighter: #d0f4f6;
    --primary-light-lightest: #e4f9fb;
    --primary-light-xlight: #f1fdfe;

    /* Neutral */
    --neutral-100: #fafafa;
    --neutral-200: #f8f9f9;
    --neutral-300: #eef0f0;
    --neutral-400: #e4e7e8;
    --neutral-500: #d9e0df;
    --neutral-600: #cfd5d6;
    --neutral-700: #c5cccd;
    --neutral-800: #bbc3c4;
    --neutral-900: #a5acad;
    --neutral-1000: #8f9596;
    --neutral-1100: #797f80;
    --neutral-1200: #646869;
    --neutral-1300: #4e5152;
    --neutral-1400: #383b3b;
    --neutral-1500: #323434;
    --neutral-1600: #252727;
    --neutral-1700: #1e1f1f;
  }

  /* Estilos globales */
  body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--neutral-100);
    color: var(--neutral-1200);
  }

  /* Estilos para el contenedor principal */
  .app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Estilos para botones y elementos interactivos */
  button,
  .button {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  button:hover,
  .button:hover {
    transform: translateY(-1px);
  }

  /* Estilos para imágenes */
  img {
    max-width: 100%;
    height: auto;
  }
}