/*
 * Implementación visual de docs/12_MINI_DESIGN_SYSTEM.md.
 * Si existe una diferencia visual, prevalece el Mini Design System.
 * Las APIs y funciones de los componentes se definen dentro de assets.
 */

:root {

/* COLOR INSTITUCIONAL */
--hola-color-primary: #004738;
--hola-color-primary-hover: #003B2E;
--hola-color-primary-light: #D4E7E1;

/* COLORES DE ESTADO */
--hola-color-success: #1E8E5A;
--hola-color-success-bg: #D1F2E0;
--hola-color-warning: #EAB308;
--hola-color-warning-bg: #FEF9C3;
--hola-color-danger: #B91C1C;
--hola-color-danger-bg: #FEE2E2;
--hola-color-info: #1D4ED8;
--hola-color-info-bg: #DBEAFE;
--hola-color-neutral: #64748B;
--hola-color-neutral-bg: #F3F4F6;

/* COLORES SOBRE ACCIONES */
--hola-color-on-primary: #FFFFFF;
--hola-color-on-danger: #FFFFFF;
--hola-color-on-info: #FFFFFF;
--hola-color-on-warning: #212B40;

/* COLORES ESTRUCTURALES */
--hola-bg-app: #ECF0FA;
--hola-bg-card: #FFFFFF;
--hola-bg-section: #E4E9F6;
--hola-bg-overlay: rgba(0,0,0,0.4);
--hola-bg-progress: rgba(0,0,0,0.15);
--hola-bg-table-header: #F9FAFB;
--hola-border-light: #E5E7EB;
--hola-border-medium: #D1D5DB;
--hola-text-heading: #595D66;
--hola-text-heading-secondary: #727783;
--hola-text-primary: #212B40;
--hola-text-secondary: #6B7280;
--hola-text-body: #595D66;
--hola-text-microcopy: #9DA1AA;

/* ALIAS DE COMPATIBILIDAD */
--hola-text-strong: var(--hola-text-heading);
--hola-text-medium: var(--hola-text-primary);
--hola-text-soft: var(--hola-text-secondary);

/* COLORES DE VISUALIZACIÓN */
--hola-chart-primary: #1C759A;
--hola-chart-secondary: #0E7490;
--hola-chart-tertiary: #5FD4DA;
--hola-chart-benchmark: #F28C28;
--hola-chart-alert: #B91C1C;

/* TIPOGRAFÍA */
--hola-font-family-base: 'Roboto', sans-serif;
--hola-font-family-heading: 'Montserrat', sans-serif;
--hola-font-family-support: 'Lato', sans-serif;

--hola-font-weight-light: 300;
--hola-font-weight-regular: 400;
--hola-font-weight-medium: 500;
--hola-font-weight-semibold: 600;
--hola-font-weight-bold: 700;

--hola-font-size-h1: 24px;
--hola-font-size-h2: 22px;
--hola-font-size-h3: 20px;
--hola-font-size-h4: 18px;
--hola-font-size-h5: 18px;
--hola-font-size-h6: 16px;
--hola-font-size-base: 14px;
--hola-font-size-support: 14px;
--hola-font-size-microcopy: 12px;

/* ALIAS DE COMPATIBILIDAD */
--hola-font-size-xxl: var(--hola-font-size-h1);
--hola-font-size-xl: var(--hola-font-size-h2);
--hola-font-size-lg: var(--hola-font-size-h3);
--hola-font-size-md: var(--hola-font-size-h5);
--hola-font-size-sm: 15px;
--hola-font-size-xs: var(--hola-font-size-h6);
--hola-font-size-xxs: var(--hola-font-size-microcopy);

--hola-line-height-tight: 1.2;
--hola-line-height-base: 1.4;
--hola-line-height-relaxed: 1.6;

--hola-letter-spacing-tight: -0.3px;
--hola-letter-spacing-normal: 0;
--hola-letter-spacing-wide: 0.3px;

/* ESPACIADO */
--hola-space-1: 4px;
--hola-space-2: 8px;
--hola-space-3: 16px;
--hola-space-4: 24px;
--hola-space-5: 32px;
--hola-space-6: 48px;

/* COMPONENTES */
--hola-radius: 8px;
--hola-control-height: 40px;
--hola-card-padding: 24px;
--hola-tooltip-bg: #03563E;
--hola-tooltip-text: #FFFFFF;

/* SOMBRAS */
--hola-shadow-card: 0 2px 8px rgba(16,24,40,0.06);
--hola-shadow-hover: 0 6px 16px rgba(16,24,40,0.08);
--hola-shadow-modal: 0 20px 40px rgba(16,24,40,0.12);

/* TOKENS TÉCNICOS */
--hola-transition-fast: 0.15s ease;
--hola-transition-normal: 0.25s ease;
--hola-transition-slow: 0.4s ease;
--hola-z-dropdown: 1000;
--hola-z-sticky: 1020;
--hola-z-overlay: 7000;
--hola-z-modal: 7001;
--hola-z-toast: 7100;
--hola-z-loader: 7101;
--hola-content-max-width: 1400px;

}