/* ====================================
   VARIABLES CSS GLOBALES - JAYDEK
   ====================================
   Este archivo contiene todas las variables CSS
   que pueden ser usadas en cualquier app del proyecto
*/

:root {
  /* ===================
     COLORES PRINCIPALES
     =================== */

  --color-azul-primario: #302A7D;
  --color-azul-secundario: #00269A;
  --color-naranja: #F6871F;
  --color-verde: #95C93D;
  --color-rojo: #dc3545;
  --color-amarillo: #FFC600;
  --color-blanco: #f8f9fa;

  /* ===================
     COLORES DE TEXTO
     =================== */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-light: #ffffff;
  --text-muted: #868e96;

  /* ===================
     COLORES DE FONDO
     =================== */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-dark: #343a40;

  /* ===================
     TIPOGRAFÍA
     =================== */
  --font-family-base: "Montserrat", sans-serif;
  --font-family-heading: "Arial", sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height-base: 1.5;

  /* ===================
     ESPACIADO
     =================== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;

  /* ===================
     BORDES Y SOMBRAS
     =================== */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-width: 1px;
  --border-color: #dee2e6;

  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* ===================
     TRANSICIONES
     =================== */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s ease;

  /* ===================
     BREAKPOINTS (para uso en calc())
     =================== */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* ===================
   ESTILOS BASE GLOBALES
   =================== */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  margin: 0;
  padding: 0;
}

/* ===================
   CLASES UTILITARIAS
   =================== */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-light { color: var(--color-light) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-light { background-color: var(--color-light) !important; }
.bg-dark { background-color: var(--color-dark) !important; }