/**
 * KCI Super MART - Premium Design Tokens (Master Green + Orange Theme)
 * 
 * Foundation file defining the design system variables.
 * Primary: Vibrant Lush Emerald / Forest Green (#0D6E54)
 * Accent / CTA: Vibrant High-Conversion Electric Orange (#FF6B00)
 */

:root {
    /* ==========================================================================
       1. MASTER COLORS: GREEN + ORANGE
       ========================================================================== */
    
    /* Primary Brand Green */
    --pm-primary: #0D6E54;
    --pm-primary-light: #128A6B;
    --pm-primary-dark: #084E3B;
    --pm-primary-glow: rgba(13, 110, 84, 0.25);
    
    --pm-primary-50: #E8F6F1;
    --pm-primary-100: #C7EADF;
    --pm-primary-200: #9FD9C8;
    --pm-primary-300: #6EC4AD;
    --pm-primary-400: #42AE92;
    --pm-primary-500: #0D6E54;
    --pm-primary-600: #0A5A44;
    --pm-primary-700: #084E3B;
    --pm-primary-800: #063A2C;
    --pm-primary-900: #03241B;

    /* Accent & CTA Electric Orange */
    --pm-accent: #FF6B00;
    --pm-accent-light: #FF8533;
    --pm-accent-dark: #E05A00;
    --pm-accent-glow: rgba(255, 107, 0, 0.35);
    
    --pm-accent-50: #FFF4ED;
    --pm-accent-100: #FFE5D4;
    --pm-accent-200: #FFC6A3;
    --pm-accent-300: #FFA46B;
    --pm-accent-400: #FF8338;
    --pm-accent-500: #FF6B00;
    --pm-accent-600: #E05A00;
    --pm-accent-700: #B84700;
    --pm-accent-800: #8F3500;
    --pm-accent-900: #662500;

    /* Secondary Support (Deep Spruce/Forest) */
    --pm-secondary: #0A3D2E;
    --pm-secondary-light: #155743;
    --pm-secondary-dark: #05261C;

    /* Semantic Status Colors */
    --pm-success: #10B981;
    --pm-success-light: #34D399;
    --pm-success-bg: #E8F8F0;
    
    --pm-warning: #F59E0B;
    --pm-warning-light: #FBBF24;
    --pm-warning-bg: #FEF3C7;
    
    --pm-error: #EF4444;
    --pm-error-light: #F87171;
    --pm-error-bg: #FEE2E2;
    
    --pm-info: #0284C7;
    --pm-info-light: #38BDF8;
    --pm-info-bg: #E0F2FE;

    /* Backgrounds & Clean Surfaces */
    --pm-bg: #F8FAF7;
    --pm-bg-alt: #F0F4EE;
    --pm-surface: #FFFFFF;
    --pm-surface-raised: #FFFFFF;
    --pm-surface-overlay: rgba(255, 255, 255, 0.92);

    /* Borders */
    --pm-border: #E0E7DC;
    --pm-border-light: #EDF2E8;
    --pm-border-hover: #CBD8C5;

    /* Text & Ink */
    --pm-text: #13241B;
    --pm-text-secondary: #3D5347;
    --pm-text-muted: #6B8074;
    --pm-text-inverse: #FFFFFF;
    --pm-link: var(--pm-primary);

    /* ==========================================================================
       2. GRADIENTS
       ========================================================================== */
    --pm-gradient-primary: linear-gradient(135deg, #0D6E54 0%, #084E3B 100%);
    --pm-gradient-orange: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);
    --pm-gradient-orange-hover: linear-gradient(135deg, #E05A00 0%, #FF6B00 100%);
    --pm-gradient-hero: linear-gradient(135deg, #07382B 0%, #0D6E54 60%, #175442 100%);
    --pm-gradient-dark: linear-gradient(135deg, #05261C 0%, #0A3D2E 100%);
    --pm-gradient-accent: linear-gradient(135deg, #FF6B00 0%, #FFA133 100%);
    --pm-gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F9FBF8 100%);
    --pm-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.55));
    --pm-gradient-badge: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);

    /* ==========================================================================
       3. TYPOGRAPHY
       ========================================================================== */
    --pm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pm-font-display: 'Inter', sans-serif;

    /* Scale */
    --pm-text-xs: 11px;
    --pm-text-sm: 13px;
    --pm-text-base: 15px;
    --pm-text-lg: 18px;
    --pm-text-xl: 21px;
    --pm-text-2xl: 26px;
    --pm-text-3xl: 32px;
    --pm-text-4xl: 40px;
    --pm-text-display: 54px;

    /* Weights */
    --pm-font-normal: 400;
    --pm-font-medium: 500;
    --pm-font-semibold: 600;
    --pm-font-bold: 700;
    --pm-font-extrabold: 800;
    --pm-font-black: 900;

    /* Line Heights */
    --pm-leading-tight: 1.15;
    --pm-leading-normal: 1.5;
    --pm-leading-relaxed: 1.7;

    /* Letter Spacing */
    --pm-tracking-tight: -0.025em;
    --pm-tracking-normal: 0em;
    --pm-tracking-wide: 0.05em;
    --pm-tracking-widest: 0.12em;

    /* ==========================================================================
       4. SPACING (4px base)
       ========================================================================== */
    --pm-space-1: 4px;
    --pm-space-2: 8px;
    --pm-space-3: 12px;
    --pm-space-4: 16px;
    --pm-space-5: 20px;
    --pm-space-6: 24px;
    --pm-space-7: 28px;
    --pm-space-8: 32px;
    --pm-space-10: 40px;
    --pm-space-12: 48px;
    --pm-space-14: 56px;
    --pm-space-16: 64px;
    --pm-space-20: 80px;
    --pm-space-24: 96px;

    /* ==========================================================================
       5. BORDER RADIUS
       ========================================================================== */
    --pm-radius-xs: 4px;
    --pm-radius-sm: 8px;
    --pm-radius-md: 12px;
    --pm-radius-lg: 16px;
    --pm-radius-xl: 22px;
    --pm-radius-2xl: 30px;
    --pm-radius-full: 9999px;

    /* ==========================================================================
       6. SHADOWS & GLOWS
       ========================================================================== */
    --pm-shadow-xs: 0 1px 2px rgba(13, 110, 84, 0.05);
    --pm-shadow-sm: 0 2px 8px rgba(13, 110, 84, 0.07);
    --pm-shadow-md: 0 6px 18px rgba(13, 110, 84, 0.1);
    --pm-shadow-lg: 0 14px 32px rgba(13, 110, 84, 0.13);
    --pm-shadow-xl: 0 24px 48px rgba(13, 110, 84, 0.18);
    
    --pm-shadow-orange: 0 8px 24px rgba(255, 107, 0, 0.35);
    --pm-shadow-green: 0 8px 24px rgba(13, 110, 84, 0.3);
    --pm-shadow-card: 0 2px 12px rgba(13, 110, 84, 0.05);
    --pm-shadow-dropdown: 0 12px 36px rgba(13, 110, 84, 0.16);
    --pm-shadow-modal: 0 24px 64px rgba(5, 38, 28, 0.3);

    /* ==========================================================================
       7. TRANSITIONS
       ========================================================================== */
    --pm-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --pm-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --pm-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --pm-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ==========================================================================
       8. Z-INDEX SCALE
       ========================================================================== */
    --pm-z-base: 1;
    --pm-z-dropdown: 100;
    --pm-z-sticky: 200;
    --pm-z-overlay: 300;
    --pm-z-modal: 400;
    --pm-z-toast: 500;

    /* ==========================================================================
       9. LAYOUT & SIZING
       ========================================================================== */
    --pm-container-max: 1320px;
    --pm-container-padding: 24px;
    --pm-header-height: 72px;
    --pm-sidebar-width: 270px;
}