/* =========================================
   SOUKPRO DESIGN SYSTEM
   CSS Custom Properties / Design Tokens
   Version: 1.0.0
   ========================================= */

:root {
    /* --- Typography --- */
    --sp-font-body:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    --sp-font-heading: 'IBM Plex Arabic', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --sp-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    --sp-text-xs:   0.75rem;
    --sp-text-sm:   0.875rem;
    --sp-text-base: 1rem;
    --sp-text-lg:   1.125rem;
    --sp-text-xl:   1.25rem;
    --sp-text-2xl:  1.5rem;
    --sp-text-3xl:  1.875rem;
    --sp-text-4xl:  2.25rem;

    --sp-font-weight-normal:  400;
    --sp-font-weight-medium:  500;
    --sp-font-weight-semibold: 600;
    --sp-font-weight-bold:    700;

    --sp-line-height: 1.6;

    /* --- Spacing (base 4px) --- */
    --sp-space-xs:  0.25rem;
    --sp-space-sm:  0.5rem;
    --sp-space-md:  1rem;
    --sp-space-lg:  1.5rem;
    --sp-space-xl:  2rem;
    --sp-space-2xl: 3rem;
    --sp-space-3xl: 4rem;
    --sp-space-4xl: 5rem;

    /* --- Colors (semantic) --- */
    --sp-color-primary:        #E84A35;
    --sp-color-primary-dark:   #C93A27;
    --sp-color-primary-light:  #F27A69;
    --sp-color-primary-bg:     rgba(232, 74, 53, 0.08);

    --sp-color-success:        #10B981;
    --sp-color-success-dark:   #0E9F6E;
    --sp-color-success-bg:     rgba(16, 185, 129, 0.08);

    --sp-color-warning:        #F59E0B;
    --sp-color-warning-dark:   #D97706;
    --sp-color-warning-bg:     rgba(245, 158, 11, 0.08);

    --sp-color-error:          #EF4444;
    --sp-color-error-dark:     #DC2626;
    --sp-color-error-bg:       rgba(239, 68, 68, 0.08);

    --sp-color-info:           #3B82F6;
    --sp-color-info-dark:      #2563EB;
    --sp-color-info-bg:        rgba(59, 130, 246, 0.08);

    --sp-color-text:           #1F2937;
    --sp-color-text-light:     #6B7280;
    --sp-color-text-muted:     #9CA3AF;
    --sp-color-white:          #FFFFFF;
    --sp-color-bg:             #FFFFFF;
    --sp-color-bg-alt:         #F9FAFB;
    --sp-color-border:         #E5E7EB;
    --sp-color-border-light:   #F3F4F6;

    --sp-color-header-bg:      var(--sp-color-white);
    --sp-color-header-text:    var(--sp-color-text);
    --sp-color-footer-bg:      #1F2937;
    --sp-color-footer-text:    #E5E7EB;
    --sp-color-footer-muted:   #A8B6C6;

    /* --- Brand / WhatsApp --- */
    --sp-color-whatsapp:       #25D366;
    --sp-color-whatsapp-dark:  #1da851;

    /* --- Shadows --- */
    --sp-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --sp-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --sp-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --sp-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

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

    /* --- Transitions --- */
    --sp-transition-fast: 150ms ease;
    --sp-transition-base: 250ms ease;
    --sp-transition-slow: 400ms ease;

    /* --- Z-Index Scale --- */
    --sp-z-dropdown: 100;
    --sp-z-sticky:   200;
    --sp-z-overlay:  300;
    --sp-z-modal:    400;
    --sp-z-toast:    500;

    /* --- Layout --- */
    --sp-container-max: 1280px;
    --sp-container-padding: 1rem;

    /* --- Header --- */
    --sp-header-height: 72px;
    --sp-header-height-scrolled: 56px;

    /* --- Other --- */
    --sp-focus-ring: 0 0 0 3px rgba(232, 74, 53, 0.25);
}