/**
 * V4 Design System - CSS Variables
 * Complete color system, gradients, surfaces, and spacing
 */

:root {
    /* ===== COLOR SYSTEM ===== */

    /* Add Green - Stock increases, confirmations */
    --color-add-green: #10b981;
    --color-add-green-light: #d1fae5;
    --color-add-green-dark: #047857;

    /* Remove Red - Stock decreases, deletions, errors */
    --color-remove-red: #ef4444;
    --color-remove-red-light: #fee2e2;
    --color-remove-red-dark: #991b1b;

    /* Price Blue - All monetary values */
    --color-price-blue: #5B7FFF;
    --color-price-blue-light: #dde5ff;
    --color-price-blue-dark: #3b5ce0;

    /* Action Purple - Primary CTAs (Pagar, Submit) */
    --color-action-purple: #7c3aed;
    --color-action-purple-light: #ede9fe;
    --color-action-purple-dark: #5b21b6;

    /* Warning Yellow - Alerts, low stock */
    --color-warning-yellow: #fbbf24;
    --color-warning-yellow-light: #fef3c7;

    /* Neutral Gray - Secondary actions, text */
    --color-neutral-gray: #64748b;
    --color-neutral-gray-light: #f1f5f9;

    /* ===== CATEGORY GRADIENTS ===== */
    /* 8 vibrant gradients for product categories */
    --cat-frutas: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --cat-carnes: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --cat-lacteos: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --cat-panaderia: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --cat-despensa: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --cat-bebidas: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --cat-snacks: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    --cat-limpieza: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

    /* ===== SURFACES ===== */
    /* Background layers for visual hierarchy */
    --surface-store: #fafaf9;        /* Main background */
    --surface-elevated: #ffffff;      /* Cards, modals, raised elements */
    --surface-cart-item: #f9fafb;     /* Cart item background */

    /* ===== TEXT COLORS ===== */
    --text-primary: #1c1917;          /* Headlines, important text */
    --text-secondary: #78716c;        /* Supporting text, labels */
    --text-tertiary: #a8a29e;         /* Placeholder, disabled */
    --text-inverse: #ffffff;          /* Text on colored backgrounds */

    /* ===== SHADOWS ===== */
    /* Elevation system for depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.15);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* ===== TOUCH TARGETS ===== */
    --touch-min: 64px;                /* Minimum touch target size */

    /* ===== SPACING SCALE ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 48px;

    /* ===== BORDER RADIUS SCALE ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 50%;

    /* ===== LAYOUT DIMENSIONS ===== */
    --header-height: 50px;
    --footer-height: 52px;
    --container-max-width: 1600px;

    /* ===== Z-INDEX SCALE ===== */
    --z-header: 100;
    --z-footer: 90;
    --z-drawer: 200;
    --z-success: 300;
    --z-modal-backdrop: 500;
    --z-modal: 999;
}