:root {
    /* Brand Colors (Electric Lime & Deep Dark Forest) */
    --color-primary: #B7F34D;             /* Electric Neon Lime */
    --color-primary-hover: #A3E635;
    --color-dark: #25352B;                /* Deep Dark Forest Charcoal */
    --color-dark-surface: #1E2B23;
    --color-accent: #8BC34A;              /* Vibrant Leaf Green */
    --color-background: #F8FAFC;          /* Clean Crisp Slate Background */
    --color-surface: #FFFFFF;             /* Pure Surface White */
    --color-text-main: #0F172A;           /* Deep dark text */
    --color-text-muted: #64748B;          /* Slate muted text */
    --color-text-light: #94A3B8;
    
    /* Outlines & Borders */
    --color-border-subtle: rgba(37, 53, 43, 0.1);
    --color-border-dark: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(183, 243, 77, 0.5);
    
    /* Layout Radius (12px standard) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    
    /* Elevation & Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-soft: 0 4px 20px rgba(15, 23, 42, 0.03);
    --shadow-card: 0 12px 32px -8px rgba(37, 53, 43, 0.08);
    --shadow-hover: 0 20px 40px -12px rgba(37, 53, 43, 0.14);
    --shadow-lime-glow: 0 0 30px rgba(183, 243, 77, 0.35);
    --shadow-dark-card: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
    
    /* Gradients */
    --gradient-hero-dark: linear-gradient(180deg, #25352B 0%, #19251E 100%);
    --gradient-lime: linear-gradient(135deg, #B7F34D 0%, #8BC34A 100%);
    
    /* Typography */
    --font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Tajawal', 'Cairo', 'Readex Pro', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --fs-display-lg: 3.5rem;    /* 56px */
    --fs-headline-xl: 2.25rem;   /* 36px */
    --fs-headline-lg: 1.65rem;   /* 26px */
    --fs-body-lg: 1.125rem;     /* 18px */
    --fs-body-md: 1rem;         /* 16px */
    --fs-label-md: 0.875rem;    /* 14px */
    --fs-caption: 0.75rem;      /* 12px */
    
    /* Spacing */
    --section-gap: 100px;
    --container-max: 1240px;
}

@media (max-width: 768px) {
    :root {
        --fs-display-lg: 2.15rem;
        --fs-headline-xl: 1.75rem;
        --fs-headline-lg: 1.3rem;
        --section-gap: 60px;
    }
}