/**
 * Nombre del Archivo: src/styles/global.css
 * Descripción: Estilos globales e inyección de Tailwind con fuentes oficiales y tokens de diseño.
 */

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

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

@layer base {
  :root {
    --color-blanco: #FFFFFF;
    --color-negro: #221E1F;
    --color-azul-pro: #0A28CC;
    --color-amarillo-marca: #F6DD38;
    --color-naranja-acento: #FF6501;
    --color-gris-zebra: #F9F9F9;
    --color-gris-borde: #E5E7EB;
  }

  body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    background-color: var(--color-gris-zebra);
    color: var(--color-negro);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-negro);
  }
}

@layer components {
  /* Token de diseño de tarjetas e imágenes institucionales */
  .radius-card {
    border-radius: 12px;
  }

  /* Sombra sutil y difuminada aprobada */
  .shadow-light {
    box-shadow: 0 4px 20px -2px rgba(34, 30, 31, 0.04), 0 2px 8px -1px rgba(34, 30, 31, 0.02);
  }

  /* Estilos de Zebra Striping para tablas extensas de datos */
  .table-zebra tbody tr:nth-child(even) {
    background-color: var(--color-gris-zebra);
  }

  .table-zebra tbody tr:nth-child(odd) {
    background-color: var(--color-blanco);
  }

  /* Botones institucionales con contrastes WCAG AA */
  .btn-primary {
    background-color: var(--color-azul-pro);
    color: var(--color-blanco);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: background-color 150ms ease-in-out;
  }

  .btn-primary:hover {
    background-color: var(--color-naranja-acento);
  }

  .btn-secondary {
    background-color: var(--color-amarillo-marca);
    color: var(--color-negro);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: background-color 150ms ease-in-out;
  }

  .btn-secondary:hover {
    background-color: var(--color-naranja-acento);
    color: var(--color-blanco);
  }
}