/* variables.css - Global CSS Variables for Simple Shipping Containers */

:root {
    /* Primary Colors */
    --ssc-primary: #199450;          /* Brand Green */
    --ssc-primary-hover: #126839;    /* Darker Green for Hover */
    
    /* Secondary Colors */
    --ssc-secondary: #4169E1;        /* Brand Blue */
    --ssc-secondary-hover: #3557BC;  /* Darker Blue for Hover */
    
    /* Accent Colors */
    --ssc-accent: #FF0000;          /* Brand Red */
    --ssc-accent-hover: #D90000;    /* Darker Red for Hover */
    
    /* Background Colors */
    --ssc-dark-bg: #314149;         /* Slate Gray for headers/footers */
    --ssc-dark-hover: #5F6E7A;      /* Darker Slate Gray for hover states */
    --ssc-gray-bg: #54595f;
    /* --ssc-light-bg: #cad2c5;        Light background for content areas */
    --ssc-light-bg: #f8f9fa;        /* Light background for content areas */
    
    /* Text Colors */
    --ssc-text: #2C3E50;            /* Dark text for readability */
    --ssc-text-light: #6C757D;      /* Lighter text for secondary content */
    --ssc-text-white: #FFFFFF;      /* White text for dark backgrounds */
    
    /* UI Colors */
    --ssc-success: var(--ssc-primary);      /* Using brand green for success */
    --ssc-warning: #FFA500;                 /* Orange for warnings */
    --ssc-danger: var(--ssc-accent);        /* Using brand red for danger */
    
    /* Border Colors */
    --ssc-border-light: #DEE2E6;           /* Light borders */
    --ssc-border-dark: var(--ssc-dark-bg);  /* Slate Gray borders */
    
    /* Spacing */
    --ssc-space-xs: 0.25rem;
    --ssc-space-sm: 0.5rem;
    --ssc-space-md: 1rem;
    --ssc-space-lg: 1.5rem;
    --ssc-space-xl: 2rem;
    
    /* Border Radius */
    --ssc-radius-sm: 0.25rem;
    --ssc-radius-md: 0.5rem;
    --ssc-radius-lg: 1rem;
    
    /* Transitions */
    --ssc-transition-fast: 0.2s ease;
    --ssc-transition-normal: 0.3s ease;
    --ssc-transition-slow: 0.5s ease;
    
    /* Shadows */
    --ssc-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --ssc-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --ssc-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

}