/* 1️⃣ Color Variables */
:root {
    /* General */
    --black1: #011128;  /* Pure Black */
    --black2: #021733;
    --black3: #243642;
    --black4: #343131;
    --black5: #4A4947;  /* Lightest Black */

    --white1: #FAF1E6;  /* Pure White */
    --white2: #F1E7E7;
    --white3: #EDE8DC;
    --white4: #EEF1DA;
    --white5: #D5C7A3;  /* Darkest White */

    --red1: rgba(255, 39, 39);
    --red2: rgba(255, 49, 49);
    --red3: rgba(255, 59, 59);
    --red4: rgba(255, 69, 69);


    --font-family: "Inter", "Roboto", sans-serif;
    --scale_effect: scale(1.02);
    --transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition_ease: transform 3s ease !important;

    --border_radius_sm: 15px;
    --border_radius_md: 20px;

    /* Set general gradient */
    --dark_gradient: linear-gradient(135deg, var(--black1), var(--black3), var(--black5));
    --light_gradient: linear-gradient(135deg, var(--white1), var(--white3), var(--white5));
    
    /* Change Primary colors 5x */
    --color-primary:   #3d5a80;  /* Main brand color */
    --color-secondary: #62b6cb;  /* Secondary/supporting color */
    --color-accent:    #25ced1;  /* Accent for highlights/CTAs */
    --color-neutral:   #F3F4F6;  /* Neutral tone for text/borders */
    --color-background:#0d1b2a;  /* Overall background */
    
    --text_color_strong: var(--black1);
    --text_color_strong_alt: var(--white1);
    --text_color: var(--black3);
    --text_color_alt: var(--white3);
    --text_color_mute: var(--black5);
    --text_color_mute_alt: var(--white5);

    --nav_bg_gradient: linear-gradient(135deg, var(--black1), var(--black3), var(--black4));
    --cta_bg_gradient: linear-gradient(135deg, var(--red4), var(--red1), rgb(255, 0, 0));
    --background_color: linear-gradient(135deg, var(--black1), var(--black2));
    --background_color_alt: linear-gradient(135deg, var(--white1), var(--white3));
    
    --shadow: 4px 4px 6px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
    --shadow_alt: 4px 4px 6px rgba(255, 255, 255, 0.1), 0 0 4px rgba(255, 255, 255, 0.2);

}