/* ========================================
   AVCTRUST DESIGN TOKENS SYSTEM
   ========================================
   
   Este archivo centraliza TODOS los colores, espaciados y valores
   utilizados en el sitio. Para cambiar un color en todo el sitio,
   solo modifica el valor aquí.
   
   Nomenclatura:
   - TOKEN_CATEGORY_ELEMENT_STATE
   - Ejemplo: COLOR_BACKGROUND_PRIMARY, COLOR_TEXT_HEADING, etc.
*/

/* ========================================
   🎨 COLOR TOKENS - TEMA CLARO
   ======================================== */
:root {
    /* === COLORES PRINCIPALES === */
    --COLOR_BRAND_PRIMARY: #f26522;        /* Naranja principal de la marca */
    --COLOR_BRAND_SECONDARY: #343a40;      /* Gris oscuro secundario */
    --COLOR_BRAND_ACCENT: #f26522;         /* Naranja de acento */
    --COLOR_HIGHLIGHT: #2196f3;            /* Azul para highlights/vínculos */
    --COLOR_ACCENT_GREEN: #2e554e;         /* Verde para elementos específicos */
    
    /* === FONDOS === */
    --COLOR_BACKGROUND_PRIMARY: #FFFFFF;    /* Fondo principal (body) */
    --COLOR_BACKGROUND_SECONDARY: #f8f9fa;  /* Fondo alternativo (secciones) */
    --COLOR_BACKGROUND_CARD: #ffffff;       /* Fondo de tarjetas */
    --COLOR_BACKGROUND_MUTED: #e9ecef;      /* Fondo para inputs readonly */
    --COLOR_BACKGROUND_OVERLAY: rgba(0, 0, 0, 0.5); /* Overlay para modales */
    
    /* === TEXTOS === */
    --COLOR_TEXT_PRIMARY: #212529;         /* Texto principal (títulos, párrafos) */
    --COLOR_TEXT_SECONDARY: #6c757d;       /* Texto secundario (subtítulos) */
    --COLOR_TEXT_LIGHT: #f8f9fa;          /* Texto claro (para fondos oscuros) */
    --COLOR_TEXT_MUTED: #9ca3af;          /* Texto apagado (notas, ayuda) */
    
    /* === BORDES Y LÍNEAS === */
    --COLOR_BORDER_PRIMARY: #dee2e6;       /* Bordes principales */
    --COLOR_BORDER_SECONDARY: #e9ecef;     /* Bordes suaves */
    --COLOR_BORDER_ACCENT: #0A74DA;        /* Bordes de enfoque */
    
    /* === FORMULARIOS === */
    --COLOR_FORM_BACKGROUND: #ffffff;      /* Fondo de formularios */
    --COLOR_FORM_INPUT_BG: #ffffff;        /* Fondo de campos de entrada */
    --COLOR_FORM_INPUT_BORDER: #e1e5e9;    /* Borde suave */
    --COLOR_FORM_INPUT_FOCUS: var(--COLOR_HIGHLIGHT); /* Color de enfoque */
    --COLOR_FORM_INPUT_TEXT: #2d3748;      /* Texto en campos */
    --COLOR_FORM_LABEL: #4a5568;           /* Color de etiquetas */
    --COLOR_FORM_PLACEHOLDER: #a0aec0;     /* Color de placeholder */
    --COLOR_FORM_ERROR: #e53e3e;           /* Color de error */
    --COLOR_FORM_SUCCESS: #38a169;         /* Color de éxito */
    
    /* === BOTONES === */
    --COLOR_BUTTON_PRIMARY_BG: #f26522;    /* Fondo botón principal */
    --COLOR_BUTTON_PRIMARY_TEXT: #000000;  /* Texto NEGRO para mejor contraste */
    --COLOR_BUTTON_PRIMARY_HOVER: #e55a1a; /* Hover botón principal */
    --COLOR_BUTTON_SECONDARY_BG: transparent; /* Fondo botón secundario */
    --COLOR_BUTTON_SECONDARY_TEXT: #f26522;   /* Texto botón secundario */
    --COLOR_BUTTON_SECONDARY_BORDER: #f26522; /* Borde botón secundario */
    
    /* === ESTADOS === */
    --COLOR_SUCCESS: #28a745;              /* Verde éxito */
    --COLOR_WARNING: #ffc107;              /* Amarillo advertencia */
    --COLOR_ERROR: #dc3545;                /* Rojo error */
    --COLOR_INFO: #17a2b8;                 /* Azul información */
    
    /* === ALERTAS Y MENSAJES === */
    --COLOR_ALERT_ERROR_BG: #f8d7da;       /* Fondo alerta error */
    --COLOR_ALERT_ERROR_TEXT: #721c24;     /* Texto alerta error */
    --COLOR_ALERT_ERROR_BORDER: #f5c6cb;   /* Borde alerta error */
    --COLOR_ALERT_SUCCESS_BG: #d4edda;     /* Fondo alerta éxito */
    --COLOR_ALERT_SUCCESS_TEXT: #155724;   /* Texto alerta éxito */
    --COLOR_ALERT_SUCCESS_BORDER: #c3e6cb; /* Borde alerta éxito */

    /* === RGBA VARIANTS PARA TRANSPARENCIAS === */
    --COLOR_ERROR_RGB: 244, 67, 54;        /* RGB error para transparencias */
    --COLOR_SUCCESS_RGB: 76, 175, 80;      /* RGB éxito para transparencias */
    --COLOR_PRIMARY_RGB: 242, 101, 34;     /* RGB primario para transparencias */
    --COLOR_HIGHLIGHT_RGB: 33, 150, 243;   /* RGB highlight para transparencias */

    /* === ESTADOS DE HOVER E INTERACCIÓN === */
    --COLOR_HOVER_LIGHT: rgba(255, 255, 255, 0.08);  /* Hover en fondos oscuros */
    --COLOR_HOVER_DARK: rgba(0, 0, 0, 0.08);         /* Hover en fondos claros */
    --COLOR_FOCUS_LIGHT: rgba(255, 255, 255, 0.4);   /* Focus en fondos oscuros */
    --COLOR_FOCUS_DARK: rgba(0, 0, 0, 0.2);          /* Focus en fondos claros */

    /* === COLORES DE DEBUG (DESARROLLO) === */
    --COLOR_DEBUG_ERROR: rgba(255, 0, 0, 0.5);       /* Debug error */
    --COLOR_DEBUG_SUCCESS: rgba(0, 255, 0, 0.5);     /* Debug success */
    
    /* === SOMBRAS === */
    --COLOR_SHADOW_LIGHT: rgba(0, 0, 0, 0.1);  /* Sombra suave */
    --COLOR_SHADOW_MEDIUM: rgba(0, 0, 0, 0.15); /* Sombra media */
    --COLOR_SHADOW_STRONG: rgba(0, 0, 0, 0.25); /* Sombra fuerte */

    /* Implementación de los tokens de diseño propuestos en la guía */
    --primary-700: #082135;
    --primary-500: #0D314F;
    --primary-300: #1E4E73;
    --accent-500: #1B828A;
    --accent-300: #43A7AF;
    --fg: #0B1320;
    --muted: #6B7280;
    --border: #E5E7EB;
    --bg: #F8FAFC;
    --bg-elev: #FFFFFF;
    --font-sans: 'Inter', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
}

/* ========================================
   🌙 COLOR TOKENS - TEMA OSCURO
   ======================================== */
html[data-theme="dark"] {
    /* === COLORES PRINCIPALES === */
    --COLOR_BRAND_PRIMARY: #f26522;        /* Naranja corporativo */
    --COLOR_BRAND_SECONDARY: #E3F2FD;      /* Azul muy claro para contraste */
    --COLOR_BRAND_ACCENT: #f26522;         /* Naranja accent */
    --COLOR_HIGHLIGHT: #64B5F6;            /* Azul más claro para mejor contraste */
    --COLOR_ACCENT_GREEN: #4ade80;         /* Verde más claro para tema oscuro */
    
    /* === FONDOS === */
    --COLOR_BACKGROUND_PRIMARY: #0D1421;    /* Azul muy oscuro como fondo principal */
    --COLOR_BACKGROUND_SECONDARY: #1E2A3A;  /* Azul gris oscuro para secciones */
    --COLOR_BACKGROUND_CARD: #1E2A3A;       /* Azul gris para cards */
    --COLOR_BACKGROUND_MUTED: #263545;      /* Fondo para inputs readonly en dark */
    --COLOR_BACKGROUND_OVERLAY: rgba(0, 0, 0, 0.7); /* Overlay más fuerte */
    
    /* === TEXTOS === */
    --COLOR_TEXT_PRIMARY: #E3F2FD;         /* Texto azul muy claro */
    --COLOR_TEXT_SECONDARY: #B3E5FC;       /* Texto secundario azul claro */
    --COLOR_TEXT_LIGHT: #1A1A1A;          /* Texto oscuro (invertido) */
    --COLOR_TEXT_MUTED: #78909C;          /* Texto apagado */
    
    /* === BORDES Y LÍNEAS === */
    --COLOR_BORDER_PRIMARY: #2E3A4A;       /* Bordes azul gris */
    --COLOR_BORDER_SECONDARY: #37474F;     /* Bordes más suaves */
    --COLOR_BORDER_ACCENT: #64B5F6;        /* Bordes de enfoque */
    
    /* === FORMULARIOS === */
    --COLOR_FORM_BACKGROUND: #1e2a3a;      /* Fondo oscuro para formularios */
    --COLOR_FORM_INPUT_BG: #2a3441;        /* Fondo de campos más oscuro */
    --COLOR_FORM_INPUT_BORDER: #4a5568;    /* Borde de campos oscuro */
    --COLOR_FORM_INPUT_FOCUS: var(--COLOR_HIGHLIGHT); /* Color de enfoque claro */
    --COLOR_FORM_INPUT_TEXT: #e2e8f0;      /* Texto claro en campos */
    --COLOR_FORM_LABEL: #cbd5e0;           /* Color de etiquetas claro */
    --COLOR_FORM_PLACEHOLDER: #718096;     /* Placeholder más sutil */
    --COLOR_FORM_ERROR: #fc8181;           /* Color de error más suave */
    --COLOR_FORM_SUCCESS: #68d391;         /* Color de éxito más suave */
    
    /* === BOTONES === */
    --COLOR_BUTTON_PRIMARY_BG: #f26522;    /* Fondo botón principal naranja */
    --COLOR_BUTTON_PRIMARY_TEXT: #000000;  /* Texto NEGRO para mejor contraste */
    --COLOR_BUTTON_PRIMARY_HOVER: #e55a1a; /* Hover más oscuro */
    --COLOR_BUTTON_SECONDARY_BG: transparent; /* Fondo transparente */
    --COLOR_BUTTON_SECONDARY_TEXT: #f26522;   /* Texto naranja */
    --COLOR_BUTTON_SECONDARY_BORDER: #f26522; /* Borde naranja */
    
    /* === ESTADOS === */
    --COLOR_SUCCESS: #4CAF50;              /* Verde más suave */
    --COLOR_WARNING: #FF9800;              /* Naranja advertencia */
    --COLOR_ERROR: #F44336;                /* Rojo más suave */
    --COLOR_INFO: #2196F3;                 /* Azul información */
    
    /* === SOMBRAS === */
    --COLOR_SHADOW_LIGHT: rgba(0, 0, 0, 0.2);  /* Sombra más visible */
    --COLOR_SHADOW_MEDIUM: rgba(0, 0, 0, 0.4);  /* Sombra media más fuerte */
    --COLOR_SHADOW_STRONG: rgba(0, 0, 0, 0.6);  /* Sombra muy fuerte */
}

/* ========================================
   📏 SPACING TOKENS
   ======================================== */
:root {
    --SPACING_XXS: 0.125rem;  /* 2px */
    --SPACING_XS: 0.25rem;    /* 4px */
    --SPACING_SM: 0.5rem;     /* 8px */
    --SPACING_MD: 0.75rem;    /* 12px - Reducido de 16px */
    --SPACING_LG: 1rem;       /* 16px - Reducido de 24px */
    --SPACING_XL: 1.25rem;    /* 20px - Reducido de 32px */
    --SPACING_XXL: 1.75rem;   /* 28px - Reducido de 48px */
    --SPACING_XXXL: 2.5rem;   /* 40px - Reducido de 64px */
}

/* ========================================
   🔤 TYPOGRAPHY TOKENS
   ======================================== */
:root {
    --FONT_FAMILY_PRIMARY: 'Inter', sans-serif;
    --FONT_SIZE_XS: 0.75rem;    /* 12px */
    --FONT_SIZE_SM: 0.875rem;   /* 14px */
    --FONT_SIZE_BASE: 1rem;     /* 16px */
    --FONT_SIZE_LG: 1.125rem;   /* 18px */
    --FONT_SIZE_XL: 1.25rem;    /* 20px */
    --FONT_SIZE_2XL: 1.5rem;    /* 24px */
    --FONT_SIZE_3XL: 2rem;      /* 32px */
    
    --FONT_WEIGHT_NORMAL: 400;
    --FONT_WEIGHT_MEDIUM: 500;
    --FONT_WEIGHT_SEMIBOLD: 600;
    --FONT_WEIGHT_BOLD: 700;
}

/* ========================================
   ⚡ ANIMATION TOKENS
   ======================================== */
:root {
    --TRANSITION_FAST: 0.15s ease;
    --TRANSITION_NORMAL: 0.3s ease;
    --TRANSITION_SLOW: 0.5s ease;
    
    --BORDER_RADIUS_XS: 0.125rem; /* 2px - Apenas redondeado UNIVERSAL */
    --BORDER_RADIUS_SM: 0.1875rem; /* 3px - Minimalista */
    --BORDER_RADIUS_MD: 0.25rem;  /* 4px - Suave */
    --BORDER_RADIUS_LG: 0.375rem; /* 6px */
    --BORDER_RADIUS_XL: 0.5rem;   /* 8px */
}

/* ========================================
   📱 BREAKPOINT TOKENS
   ======================================== */
:root {
    --BREAKPOINT_SM: 576px;
    --BREAKPOINT_MD: 768px;
    --BREAKPOINT_LG: 992px;
    --BREAKPOINT_XL: 1200px;
    --BREAKPOINT_XXL: 1400px;
}