/* filepath: website_sale_aplicoop/static/src/css/base/variables.css */

/**
 * CSS Custom Properties (Variables)
 * Colores, tipografía, espaciados centralizados
 */

:root {
    /* ========== COLORS ========== */
    --primary-color: var(--primary, #007bff);
    --primary-dark: var(--primary-dark, #0056b3);
    --secondary-color: var(--secondary, #6c757d);
    --success-color: var(--success, #28a745);
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #2d3748;

    /* Text colors */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #6b7280;

    /* Border colors */
    --border-light: #e2e8f0;
    --border-medium: #cbd5e0;
    --border-dark: #718096;

    /* ========== TYPOGRAPHY ========== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ========== SPACING ========== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ========== BORDER RADIUS ========== */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* ========== SHADOWS ========== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);

    /* ========== TRANSITIONS ========== */
    --transition-fast: 200ms ease;
    --transition-normal: 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
    --transition-slow: 500ms ease;

    /* ========== Z-INDEX ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-notification: 9999;
}