:root {
/* Color Palette */
            
        
    --gradient-bg: linear-gradient(135deg, var(--color-secondary-dark-1),var(--color-secondary-dark-2));
    --glass-effect: saturate(180%) blur(10px);
            

    /* Primary Colors */
    --color-primary: #4ade80;
    --color-primary-light-1: #aef4c2;
    --color-primary-light-2: #7ee8a4;
    --color-primary-dark-1: #2fbf5f;
    --color-primary-dark-2: #1f9b4a;

    /* Secondary Colors */
    --color-secondary: #2c3e50;
    --color-secondary-light-1: #4a5d72;
    --color-secondary-light-2: #6c7c8f;
    --color-secondary-dark-1: #1f2c3a;
    --color-secondary-dark-2: #16202a;

    /* Background Colors */
    --color-bg-light: rgba(255, 255, 255, 0.90);
    --color-bg-light-solid: rgba(255, 255, 255, 1);
    --color-bg-light-transparent: rgba(255, 255, 255, 0.8);
    --color-bg-dark: rgba(255, 255, 255, 0.123);

    --color-text-primary: #334155; 
    --color-text-secondary: #64748b; 
    --color-text-muted: #94a3b8; 
    --color-text-light: #ffffff;
    
    /*family Tree */
    --male: #3498db; 
    --female: #e84393;

    /* Border Colors */
    --color-border-light: #e2e8f0;
    --color-border-primary: var(--color-primary);
    --border-radius: 8px;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
    --white: #fff;
    --danger: #ef4444;
    --success: #10b981;
  
    /* Font Families */
    --font-en-primary: 'Roboto', Arial, Helvetica, sans-serif;
    --font-en-secondary: 'Elsie', cursive, Arial, Helvetica, sans-serif;
    --font-gu-primary: 'Baloo Bhai 2', Arial, Helvetica, sans-serif;
    --font-gu-secondary: 'Baloo Bhai 2', Arial, Helvetica, sans-serif;


    /* trasition Durations */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    }