/* =============================================================================
   MODERN MAGENDOO DESIGN SYSTEM
   Based on UX best practices: Bold, minimal, semantic, performance-focused
   
   Version: 4
   Last Updated: 2025-06-21
   Remember to update ?v=X in header-modern.php when making changes!
   ============================================================================= */

/* =============================================================================
   1. CSS VARIABLES & DESIGN TOKENS
   ============================================================================= */
:root {
  /* Color System - Monochrome + Single Accent */
  --color-primary: #002b5c;
  --color-primary-dark: #001a3d;
  --color-secondary: #004080;
  --color-accent: #c8102e;
  --color-accent-dark: #9f0d27;
  --color-golang: #00ADD8;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red: #dc3545;
  --color-green: #28a745;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #e9ecef;
  --color-gray-200: #dee2e6;
  --color-gray-300: #ced4da;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-900: #212529;
  
  /* Typography Scale - Modular Scale 1.333 (Perfect Fourth) */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 1rem;       /* 16px - base */
  --font-size-md: 1.333rem;   /* 21px */
  --font-size-lg: 1.777rem;   /* 28px */
  --font-size-xl: 2.369rem;   /* 38px */
  --font-size-2xl: 3.157rem;  /* 51px */
  --font-size-3xl: 4.209rem;  /* 67px */
  --font-size-4xl: 5.61rem;   /* 90px */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Spacing Scale - 8px base unit */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */
  --space-16: 8rem;    /* 128px */
  
  /* Layout */
  --container-max-width: 1200px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}