:root {
    /* Theme Gradients & Accents (Vibrant Coral to Warm Orange) */
    --color-primary: #EE33FF;      
    --color-secondary: #ee33ff80;    
    --color-hero: hsl(295, 100%, 30%);
    
    /* Neutrals (Deep Charcoal & Dark Grays) */
    --color-bg: #121212;           /* Main deep background */
    --color-bg-alt: #1a1a1a;       /* Slightly lighter background for sections */
    --color-bg-card: #242424;      /* Card/Browser wrapper backgrounds */
    --color-text-main: #f5f5f5;    /* Off-white for readable body text */
    --color-text-muted: #b3b3b3;   /* Light gray for descriptions */
    --color-text-nav: #cccccc;     /* Navigation link color */
    --color-text-light: #121212;   /* oposite of Pure white */
    --color-footer: #484848;       /* footer's background color */
    
    /* Borders & Transparencies */
    --color-border-light: #2d2d2d;
    --color-border-nav: rgba(255, 255, 255, 0.05);
    --color-nav-glass: rgba(18, 18, 18, 0.85); /* Dark frosted-glass effect */
    --color-tag-glass: rgba(255, 255, 255, 0.1);

    /* shadows */
    --color-shadow: 0 4px 6px rgba(255, 255, 255, 0.08);
    --color-shadow-hover: 0 2px 4px rgba(255, 255, 255, 0.14);

}