/*
|-------------------------------------------------------------
| Color Variables - Theme Colors
| Define all colors in one place for easy maintenance
|-------------------------------------------------------------
*/

:root {
    /* Primary Colors */
    --color-primary: #76bc21;
    --color-primary-hover: #7dd257;
    --color-primary-active: #5c9917;
    --color-primary-focus: rgba(118, 188, 33, 0.35);
    --color-primary-focus-outline: #d3f3a3;

    /* Secondary Colors */
    --color-secondary: #005cac;
    --color-secondary-hover: rgba(0, 92, 172, 0.1);
    --color-secondary-hover-solid: #004a8d; /* Darker blue for solid button hover */
    --color-secondary-active-solid: #003d73; /* Even darker for active state */
    --color-secondary-focus: rgba(0, 92, 172, 0.2);
    --color-secondary-focus-outline: #b9defe;
    --color-secondary-surface: #EBF4FF;
    --color-secondary-background: #f0f7ff;
    --color-secondary-background-hover: #dfeeff;
    --color-secondary-background-focus: #b9defe;
    
    /* Neutral Colors */
    --color-white: #F9F9FA;
    --color-black: #000000;
    --color-gray-100: #F9F9FA;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Status Colors */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Accent Colors */
    --color-accent: #F4771D;
    --color-discount: #FE9A00;

    /* Sale Label */
    --color-sale-bg: #FFE685;
    --color-sale-text: #1A1A1A;

    /* Disabled State */
    --color-disabled-bg: #e6e6e7;
    --color-disabled-text: #afb0b1;
    --color-disabled-opacity: 0.6;

    /* Out of Stock Button */
    --color-out-of-stock-bg: #EFEFF1;
    --color-out-of-stock-text: #878889;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    --radius-custom: 12px;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    --spacing-2xl: 1.5rem;

    /* Shadows */
    --shadow-focus: 0 0 0 3px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
}