/* ========================================
   Splash Out — CSS Variables
   Paint Center & DIY Store Theme
   ======================================== */

:root {
    /* Brand Colors — derived from the colorful splash logo */
    --shop-primary:       #1976D2;
    --shop-primary-dark:  #0D47A1;
    --shop-primary-light: #BBDEFB;
    --shop-secondary:     #E91E63;
    --shop-accent:        #FF9800;
    --shop-accent-dark:   #E65100;

    /* Splash palette */
    --splash-blue:    #1976D2;
    --splash-cyan:    #00BCD4;
    --splash-yellow:  #FFC107;
    --splash-green:   #4CAF50;
    --splash-pink:    #E91E63;
    --splash-orange:  #FF5722;

    /* Neutrals */
    --shop-bg:          #ffffff;
    --shop-background:  #ffffff;
    --shop-text:        #212121;
    --shop-text-muted:  #757575;
    --shop-muted:       #9E9E9E;
    --shop-border:      #E0E0E0;
    --shop-surface:     #F5F7FA;
    --shop-surface-alt: #FAFAFA;

    /* Typography */
    --shop-heading-font: 'Poppins', sans-serif;
    --shop-body-font:    'Inter', sans-serif;

    /* Promo */
    --shop-promo: #E91E63;

    /* Layout */
    --shop-max-width:  1280px;
    --shop-radius:     12px;
    --shop-radius-sm:  8px;
    --shop-radius-lg:  20px;

    /* Effects */
    --shop-shadow:     0 2px 8px rgba(0, 0, 0, 0.08);
    --shop-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.1);
    --shop-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
    --shop-transition: 0.3s ease;
}