/**
 * AGEEMCTI - Paleta de Colores Institucional Completa
 * Navy (#0A192F) + Gold (#C9A84C) Theme
 * 
 * Uso: Incluir después de Bootstrap/Tailwind para sobrescribir
 * <link href="/assets/css/palette.css" rel="stylesheet">
 */

/* =====================================================
   VARIABLES CSS BASE
   ===================================================== */
:root {
  /* Colores primarios con valores RGB */
  --age-navy: #0A192F;
  --age-navy-rgb: 10, 25, 47;
  --age-navy-light: #112240;
  --age-navy-light-rgb: 17, 34, 64;
  --age-navy-dark: #061224;
  --age-navy-dark-rgb: 6, 18, 36;
  --age-navy-muted: #1a3a5c;
  --age-navy-muted-rgb: 26, 58, 92;
  
  /* Colores acento con valores RGB */
  --age-gold: #C9A84C;
  --age-gold-rgb: 201, 168, 76;
  --age-gold-light: #D4B76A;
  --age-gold-light-rgb: 212, 183, 106;
  --age-gold-dark: #A68A3D;
  --age-gold-dark-rgb: 166, 138, 61;
  --age-gold-muted: #B89A4A;
  --age-gold-muted-rgb: 184, 154, 74;
  
  /* Variantes de transparencia Navy */
  --age-navy-10: rgba(var(--age-navy-rgb), 0.1);
  --age-navy-25: rgba(var(--age-navy-rgb), 0.25);
  --age-navy-50: rgba(var(--age-navy-rgb), 0.5);
  --age-navy-75: rgba(var(--age-navy-rgb), 0.75);
  --age-navy-90: rgba(var(--age-navy-rgb), 0.9);
  
  /* Variantes de transparencia Gold */
  --age-gold-10: rgba(var(--age-gold-rgb), 0.1);
  --age-gold-25: rgba(var(--age-gold-rgb), 0.25);
  --age-gold-50: rgba(var(--age-gold-rgb), 0.5);
  --age-gold-75: rgba(var(--age-gold-rgb), 0.75);
  --age-gold-90: rgba(var(--age-gold-rgb), 0.9);
  
  /* Variables de contexto - Fondos */
  --bg-primary: var(--age-navy);
  --bg-secondary: var(--age-navy-light);
  --bg-accent: var(--age-gold);
  --bg-light: #F8F9FA;
  --bg-white: #FFFFFF;
  
  /* Variables de contexto - Textos */
  --text-primary: var(--age-navy);
  --text-secondary: var(--age-navy-muted);
  --text-accent: var(--age-gold);
  --text-muted: #6C757D;
  --text-white: #FFFFFF;
  --text-light: #F8F9FA;
  
  /* Colores semánticos */
  --color-success: #28A745;
  --color-success-light: #D4EDDA;
  --color-error: #DC3545;
  --color-error-light: #F8D7DA;
  --color-warning: #FFC107;
  --color-warning-light: #FFF3CD;
  --color-info: #17A2B8;
  --color-info-light: #D1ECF1;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(var(--age-navy-rgb), 0.05);
  --shadow-md: 0 4px 6px rgba(var(--age-navy-rgb), 0.1);
  --shadow-lg: 0 10px 15px rgba(var(--age-navy-rgb), 0.15);
  --shadow-gold: 0 4px 14px rgba(var(--age-gold-rgb), 0.3);
  --shadow-navy: 0 4px 14px rgba(var(--age-navy-rgb), 0.3);
}

/* =====================================================
   CLASES DE UTILIDAD - FONDOS
   ===================================================== */
.bg-navy { background-color: var(--age-navy) !important; }
.bg-navy-light { background-color: var(--age-navy-light) !important; }
.bg-navy-dark { background-color: var(--age-navy-dark) !important; }
.bg-navy-muted { background-color: var(--age-navy-muted) !important; }

.bg-gold { background-color: var(--age-gold) !important; }
.bg-gold-light { background-color: var(--age-gold-light) !important; }
.bg-gold-dark { background-color: var(--age-gold-dark) !important; }
.bg-gold-muted { background-color: var(--age-gold-muted) !important; }

/* Fondos con transparencia */
.bg-navy-10 { background-color: var(--age-navy-10) !important; }
.bg-navy-25 { background-color: var(--age-navy-25) !important; }
.bg-navy-50 { background-color: var(--age-navy-50) !important; }
.bg-navy-75 { background-color: var(--age-navy-75) !important; }
.bg-navy-90 { background-color: var(--age-navy-90) !important; }

.bg-gold-10 { background-color: var(--age-gold-10) !important; }
.bg-gold-25 { background-color: var(--age-gold-25) !important; }
.bg-gold-50 { background-color: var(--age-gold-50) !important; }
.bg-gold-75 { background-color: var(--age-gold-75) !important; }
.bg-gold-90 { background-color: var(--age-gold-90) !important; }

/* =====================================================
   CLASES DE UTILIDAD - TEXTOS
   ===================================================== */
.text-navy { color: var(--age-navy) !important; }
.text-navy-light { color: var(--age-navy-light) !important; }
.text-navy-dark { color: var(--age-navy-dark) !important; }
.text-navy-muted { color: var(--age-navy-muted) !important; }

.text-gold { color: var(--age-gold) !important; }
.text-gold-light { color: var(--age-gold-light) !important; }
.text-gold-dark { color: var(--age-gold-dark) !important; }
.text-gold-muted { color: var(--age-gold-muted) !important; }

/* =====================================================
   CLASES DE UTILIDAD - BORDES
   ===================================================== */
.border-navy { border-color: var(--age-navy) !important; }
.border-navy-light { border-color: var(--age-navy-light) !important; }
.border-gold { border-color: var(--age-gold) !important; }
.border-gold-light { border-color: var(--age-gold-light) !important; }

/* =====================================================
   GRADIENTES
   ===================================================== */
.bg-gradient-navy {
  background: linear-gradient(135deg, var(--age-navy) 0%, var(--age-navy-light) 100%) !important;
}

.bg-gradient-navy-gold {
  background: linear-gradient(135deg, var(--age-navy) 0%, var(--age-navy-light) 50%, var(--age-gold-dark) 100%) !important;
}

.bg-gradient-gold {
  background: linear-gradient(135deg, var(--age-gold) 0%, var(--age-gold-light) 100%) !important;
}

/* =====================================================
   COLORES SEMÁNTICOS
   ===================================================== */
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }

.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-light { background-color: var(--color-error-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-light { background-color: var(--color-info-light) !important; }