/* ============================================
   MONLIS Website - CSS Variables
   Design System based on Figma
   ============================================ */

:root {
  /* ==========================================
     COLORS
     ========================================== */
  
  /* Primary Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-mine-shaft: #232323;
  --color-rose-white: #FFF7F7;
  
  /* Grey Scale */
  --color-grey-14: #232323;
  --color-grey-98: #FFF7F7;
  
  /* Overlay Colors */
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(255, 255, 255, 0.1);
  
  /* ==========================================
     TYPOGRAPHY - Font Families
     ========================================== */
  --font-primary: 'Josefin Sans', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  
  /* ==========================================
     TYPOGRAPHY - Font Weights
     ========================================== */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ==========================================
     TYPOGRAPHY - Font Sizes
     ========================================== */
  --font-size-13: 13px;
  --font-size-15: 15px;
  --font-size-17: 17px;
  --font-size-22: 22px;
  --font-size-50: 50px;
  --font-size-70: 70px;
  --font-size-130: 130px;
  
  /* ==========================================
     TYPOGRAPHY - Line Heights
     ========================================== */
  --line-height-15: 15px;
  --line-height-20: 20.4px;
  --line-height-26: 26px;
  --line-height-26-4: 26.4px;
  --line-height-60: 60px;
  --line-height-84: 84px;
  --line-height-156: 156px;
  
  /* ==========================================
     SPACING
     ========================================== */
  --spacing-xxs: 4px;
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 50px;
  --spacing-xxl: 100px;
  
  /* ==========================================
     LAYOUT
     ========================================== */
  --container-padding: 100px;
  --container-max-width: 1920px;
  --header-height: 77px;
  --footer-height: 121px;
  
  /* ==========================================
     BORDER RADIUS
     ========================================== */
  --radius-sm: 15px;
  --radius-md: 30px;
  
  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ==========================================
     Z-INDEX LAYERS
     ========================================== */
  --z-header: 100;
  --z-overlay: 50;
  --z-content: 10;
  --z-background: 1;
  
  /* ==========================================
     BLUR EFFECTS
     ========================================== */
  --blur-light: 1.5px;
  --blur-medium: 10px;
}

/* ============================================
   RESPONSIVE BREAKPOINTS (for reference)
   - Mobile: < 768px
   - Tablet: 768px - 1024px
   - Desktop: 1024px - 1440px
   - Large Desktop: > 1440px
   ============================================ */