:root {
    /* Base Colors */
    --base-color: 200;

    /* Glassmorphism - Modern Background Gradients */
    --background-lightest: linear-gradient(135deg, rgba(41, 171, 226, 0.15), rgba(107, 180, 240, 0.1));
    --background-lighter: rgba(255, 255, 255, 0.08);
    --background-light: rgba(255, 255, 255, 0.05);
    --background-dark: rgba(0, 0, 0, 0.05);

    /* Header Glass Effect */
    --header-dark: rgba(30, 90, 140, 0.15);
    --header-darker: rgba(50, 120, 170, 0.2);

    /* Notification Colors */
    --chat-notification-thingy: rgba(0, 0, 0, 0.15);

    /* Text Colors - Improved contrast for glass backgrounds */
    --text-light: #1a3a4a;
    --text-dark: #2d5a6b;
    --text-darker: #3d7a8b;

    /* Accent Colors */
    --blue: linear-gradient(135deg, #29ABE2, #1e90ff);
    --red: linear-gradient(135deg, #F1447F, #ff5fa8);
    --green: #22B573;
    --yellow: #FBB03B;
    --pink: #F1447F;
    --cyan: #29ABE2;

    /* Glass Effect Colors */
    --glass-light: rgba(255, 255, 255, 0.2);
    --glass-medium: rgba(255, 255, 255, 0.15);
    --glass-dark: rgba(255, 255, 255, 0.1);
    --glass-darker: rgba(0, 0, 0, 0.1);

    /* Sizing */
    --height-large: 100px;
    --height-medium-large: 70px;
    --height-medium-larger: 50px;
    --height-medium: 30px;
    --height-small: 15px;

    /* Spacing & Borders */
    --border-radius: 20px;
    --border-radius-large: 40px;
    --border-size: 10px;

    /* Typography */
    --text-large: 60px;
    --text-medium: 30px;
    --text-small: 17px;

    /* Glassmorphism Effects */
    --glass-blur: blur(20px);
    --glass-saturation: saturate(180%);
    --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.15);
    --shadow-glass-sm: 0 4px 15px rgba(31, 38, 135, 0.1);
}