:root {
    /* ==========================================================================
       KHOOBLIFE COLOR PALETTE - OFFICIAL BRAND COLORS
       ========================================================================== */
    
    /* Primary Colors */
    --primary-color: #A8B8A0;
    --primary-color-alt: #B2C8BA;
    --primary-color-dark: #8FA085;
    --primary-color-light: #C5D1BE;
    
    /* Secondary Colors */
    --secondary-color: #FFDAB9;
    --secondary-color-alt: #F0A88A;
    --secondary-color-dark: #E6C1A0;
    --secondary-color-light: #FFF0E6;
    
    /* Neutral Colors */
    --bg-primary: #F8F6F2;
    --bg-secondary: #FAF3E9;
    --bg-card: #FFFFFF;
    --bg-accent: #E9E0D2;
    --text-primary: #4A4A4A;
    --text-secondary: #36454F;
    --text-muted: #718096;
    --text-light: #94A3B8;
    
    /* Supporting Colors */
    --accent-beige: #D8C3A5;
    --accent-sage: #9EAA8F;
    --accent-terracotta: #C7927F;
    --accent-cream: #F5F1EB;
    
    /* Functional Colors */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    
    /* ==========================================================================
       TYPOGRAPHY VARIABLES
       ========================================================================== */
    
    /* Font Family Variables */
    --font-primary: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-secondary: 'Vazirmatn', Arial, sans-serif;
    --font-heading: 'Vazirmatn', Arial, sans-serif;
    
    /* Font Size Variables */
    --font-size-base: 16px;
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    
    /* Line Height Variables */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Font Weight Variables */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* ==========================================================================
       SPACING VARIABLES
       ========================================================================== */
    
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* ==========================================================================
       BORDER RADIUS VARIABLES
       ========================================================================== */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* ==========================================================================
       SHADOW VARIABLES
       ========================================================================== */
    
    --shadow-sm: 0 2px 4px rgba(168, 184, 160, 0.1);
    --shadow-md: 0 4px 6px rgba(168, 184, 160, 0.1);
    --shadow-lg: 0 10px 15px rgba(168, 184, 160, 0.1);
    --shadow-xl: 0 20px 25px rgba(168, 184, 160, 0.1);
    
    /* ==========================================================================
       TRANSITION VARIABLES
       ========================================================================== */
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}