/*
 * AssamWeb Store - CSS Variables (Design Tokens)
 * Location: public_html/store/assets/css/variables.css
 * 
 * Note: These variables establish the requested Apple/Stripe/SaaS design language,
 * setting up the blue primary, orange CTA, 20px border radii, and soft shadows.
 */

:root {
    /* Main Brand Colors */
    --aw-primary: #0056b3;       /* Premium Blue */
    --aw-primary-hover: #004494;
    --aw-primary-light: #e6f0fa;
    
    --aw-cta: #ff6b00;           /* Attention-grabbing Orange */
    --aw-cta-hover: #e56000;
    --aw-cta-light: #fff0e6;
    
    /* Secondary & System Colors */
    --aw-success: #10b981;       /* Trust/Checkmark Green */
    --aw-success-light: #d1fae5;
    --aw-warning: #f59e0b;       /* Star rating Yellow/Orange */
    --aw-info: #3b82f6;          /* Informational Blue */
    
    /* Typography */
    --aw-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aw-font-heading: 'Poppins', var(--aw-font-body);
    
    /* Text Colors */
    --aw-text-dark: #0f172a;     /* Deep slate for headings */
    --aw-text-muted: #64748b;    /* Slate grey for secondary text */
    --aw-text-light: #f8fafc;    /* Off-white for dark backgrounds */
    
    /* Background Colors */
    --aw-bg-body: #ffffff;
    --aw-bg-surface: #f8fafc;
    --aw-bg-glass: rgba(255, 255, 255, 0.75);
    
    /* Border Radius Requirements (20px specified in prompt) */
    --aw-radius-sm: 8px;
    --aw-radius-md: 12px;
    --aw-radius-lg: 20px;        /* The core 20px radius */
    --aw-radius-xl: 24px;
    --aw-radius-pill: 50rem;
    
    /* Soft Shadows (Premium SaaS Look) */
    --aw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --aw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --aw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --aw-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Specialty Glows */
    --aw-shadow-glow: 0 0 15px rgba(0, 86, 179, 0.15);
    --aw-shadow-cta-glow: 0 4px 14px rgba(255, 107, 0, 0.35);
    
    /* Animations & Transitions */
    --aw-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --aw-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --aw-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}