71 lines
2 KiB
CSS
71 lines
2 KiB
CSS
/* 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(.2, .9, .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;
|
|
}
|