:root {
    /* ============================================
     SPACING SYSTEM - Sistema completo de espaciado
     ============================================ */

    /* Base spacing values */
    --spacing-0: 0rem;
    /* 0px */
    --spacing-1: 0.0625rem;
    /* 1px */
    --spacing-2: 0.125rem;
    /* 2px */
    --spacing-4: 0.25rem;
    /* 4px */
    --spacing-6: 0.375rem;
    /* 6px */
    --spacing-8: 0.5rem;
    /* 8px */
    --spacing-10: 0.625rem;
    /* 10px */
    --spacing-12: 0.75rem;
    /* 12px */
    --spacing-14: 0.875rem;
    /* 14px */
    --spacing-16: 1rem;
    /* 16px */
    --spacing-20: 1.25rem;
    /* 20px */
    --spacing-24: 1.5rem;
    /* 24px */
    --spacing-28: 1.75rem;
    /* 28px */
    --spacing-32: 2rem;
    /* 32px */
    --spacing-36: 2.25rem;
    /* 36px */
    --spacing-40: 2.5rem;
    /* 40px */
    --spacing-44: 2.75rem;
    /* 44px */
    --spacing-48: 3rem;
    /* 48px */
    --spacing-56: 3.5rem;
    /* 56px */
    --spacing-64: 4rem;
    /* 64px */
    --spacing-80: 5rem;
    /* 80px */
    --spacing-96: 6rem;
    /* 96px */
    --spacing-112: 7rem;
    /* 112px */
    --spacing-128: 8rem;
    /* 128px */
    --spacing-144: 9rem;
    /* 144px */
    --spacing-160: 10rem;
    /* 160px */
    --spacing-240: 15rem;
    /* 240px */

    /* ============================================
     SPACING ALIASES - Nombres semánticos
     ============================================
     Aliases con nombres fáciles de recordar
     Uso recomendado para mayor claridad en el código
     ============================================ */
    --spacing-xs: var(--spacing-4);    /* 4px - Extra pequeño */
    --spacing-sm: var(--spacing-8);    /* 8px - Pequeño */
    --spacing-md: var(--spacing-16);   /* 16px - Mediano (base) */
    --spacing-lg: var(--spacing-24);   /* 24px - Grande */
    --spacing-xl: var(--spacing-32);   /* 32px - Extra grande */
    --spacing-2xl: var(--spacing-48);  /* 48px - 2x extra grande */
    --spacing-3xl: var(--spacing-64);  /* 64px - 3x extra grande */
    --spacing-4xl: var(--spacing-96);  /* 96px - 4x extra grande */
    --spacing-5xl: var(--spacing-160); /* 160px - 5x extra grande */

    /* ============================================
     BORDER RADIUS - Bordes redondeados
     ============================================
     Sistema de redondeo para componentes
     Progresión: none → 4px → 8px → 16px → full
     ============================================ */

    /* Valores base de radius */
    --radius-none: 0;              /* Sin redondeo - bordes rectos */
    --radius-0: 0;                 /* Alias de none */
    --radius-4: 0.25rem;           /* 4px - Redondeo sutil */
    --radius-8: 0.5rem;            /* 8px - Redondeo estándar */
    --radius-16: 1rem;             /* 16px - Redondeo pronunciado */
    --radius-full: 62.4375rem;     /* 999rem - Círculo/píldora completa */

    /* Aliases semánticos de radius */
    --radius-sm: var(--radius-4);  /* 4px - Pequeño: inputs, cards sutiles */
    --radius-md: var(--radius-8);  /* 8px - Mediano: botones, cards */
    --radius-lg: var(--radius-16); /* 16px - Grande: modales, contenedores */

    /* ============================================
     BORDER WIDTHS - Anchos de borde
     ============================================
     Sistema de grosores para bordes de elementos
     Progresión: 0 → 1px → 2px → 3px → 4px
     ============================================ */

    /* Valores base de border width */
    --border-width-0: 0;               /* Sin borde */
    --border-width-1: 0.0625rem;       /* 1px - Borde estándar */
    --border-width-2: 0.125rem;        /* 2px - Borde medio */
    --border-width-3: 0.1875rem;       /* 3px - Borde grueso */
    --border-width-4: 0.25rem;         /* 4px - Borde extra grueso */

    /* Aliases semánticos de border width */
    --border-width-thin: var(--border-width-1);    /* 1px - Delgado: divisores, inputs */
    --border-width-medium: var(--border-width-2);  /* 2px - Medio: elementos enfatizados */
    --border-width-thick: var(--border-width-3);   /* 3px - Grueso: estados activos, focus */
}