:root {
    /* Tipografía */
    --ui-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Tamaños tipográficos */
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 13px;
    --ui-font-size-base: 15px;
    --ui-font-size-lg: 18px;
    --ui-font-size-title: 22px;
    --ui-font-size-metric: 42px;

    /* Pesos tipográficos */
    --ui-font-weight-normal: 400;
    --ui-font-weight-medium: 600;
    --ui-font-weight-bold: 700;

    /* Alturas de línea */
    --ui-line-height-base: 1.5;
    --ui-line-height-heading: 1.25;

    /* Espaciado */
    --ui-space-0: 0;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-space-6: 32px;

    /* Colores base */
    --ui-color-background: #f4f7fa;
    --ui-color-surface: #ffffff;
    --ui-color-surface-muted: #f8fafc;

    /* Colores funcionales */
    --ui-color-primary: #1f5a94;
    --ui-color-primary-hover: #184873;
    --ui-color-success: #2e7d5a;
    --ui-color-info: #3a72a8;
    --ui-color-warning: #a06410;
    --ui-color-danger: #b3261e;

    /* Colores de texto */
    --ui-color-text: #172033;
    --ui-color-text-muted: #58687d;
    --ui-color-text-inverse: #ffffff;

    /* Colores de borde */
    --ui-color-border: #dce3ea;
    --ui-color-border-strong: #c5ced8;

    /* Radios */
    --ui-radius-none: 0;
    --ui-radius-sm: 4px;
    --ui-radius-base: 6px;
    --ui-radius-lg: 10px;
    --ui-radius-pill: 999px;

    /* Sombras */
    --ui-shadow-none: none;
    --ui-shadow-panel: 0 1px 3px rgba(15, 23, 42, 0.08);
    --ui-shadow-dropdown: 0 8px 24px rgba(15, 23, 42, 0.12);
    --ui-shadow-focus: 0 0 0 3px rgba(31, 90, 148, 0.18);

    /* Capas o z-index */
    --ui-z-base: 0;
    --ui-z-dropdown: 1000;
    --ui-z-navbar: 1030;
    --ui-z-modal-backdrop: 1040;
    --ui-z-modal: 1050;

    /* Dimensiones estructurales heredadas */
    --ui-sidebar-width: 250px;
    --ui-navbar-height: 50px;
    --ui-control-height: 34px;
    --ui-control-height-lg: 46px;

    /* Tokens de botones preparados para uso futuro */
    --ui-button-primary-bg: #1f5a94;
    --ui-button-primary-text: #ffffff;
    --ui-button-primary-border: #194d7e;
    --ui-button-danger-bg: #b3261e;
    --ui-button-danger-text: #ffffff;
    --ui-button-danger-border: #951f19;
    --ui-button-radius: var(--ui-radius-base);

    /* Tokens de formularios preparados para uso futuro */
    --ui-input-bg: #ffffff;
    --ui-input-text: #172033;
    --ui-input-border: #cbd5e1;
    --ui-input-border-focus: #1f5a94;
    --ui-input-placeholder: #64748b;
    --ui-input-radius: var(--ui-radius-base);

    /* Tokens de tablas preparados para uso futuro */
    --ui-table-bg: #ffffff;
    --ui-table-header-bg: #f1f5f9;
    --ui-table-border: #dce3ea;
    --ui-table-row-hover: #f8fafc;
    --ui-table-text: #172033;

    /* Tokens de paneles o tarjetas preparados para uso futuro */
    --ui-card-bg: #ffffff;
    --ui-card-border: #dce3ea;
    --ui-card-radius: var(--ui-radius-base);
    --ui-card-shadow: var(--ui-shadow-panel);

    /* Tokens de alertas y estados preparados para uso futuro */
    --ui-alert-success-bg: #eaf6ef;
    --ui-alert-success-text: #1e5a3a;
    --ui-alert-warning-bg: #fff7e6;
    --ui-alert-warning-text: #714708;
    --ui-alert-danger-bg: #fdecec;
    --ui-alert-danger-text: #8f1d14;
    --ui-alert-info-bg: #eaf2fb;
    --ui-alert-info-text: #174a7a;
}
