/* CSS Variables for consistent theming */
:root {
    /* General Backgrounds */
    --color-bg-light: #f0f2f5; /* Main page background in light mode */
    --color-bg-dark: #1a1a1a;  /* Main page background in dark mode */

    /* Card/Box Backgrounds */
    --color-card-light: #ffffff; /* Login container background in light mode */
    --color-card-dark: #2b2b2b;  /* Login container background in dark mode */

    /* Primary Accent Color (originally green on this page) */
    --color-primary-light: #55A630; /* Your green color */
    --color-primary-dark: #ffffff; /* Green changes to white in dark mode */

    /* Secondary Accent Color (purple for specific buttons like acctStep) */
    --color-secondary-accent-light: #55A630;
    /* Your purple color */
    --color-secondary-accent-dark: #ffffff;
    /* Purple changes to white in dark mode */

    /* Text Colors */
    --color-text-default-light: #333;      /* Dark text for general content */
    --color-text-default-dark: #e0e0e0;    /* Light text for general content in dark mode */
    --color-text-muted-light: #6c757d;     /* Muted text (e.g., forgot password) */
    --color-text-muted-dark: #bbbbbb;      /* Lighter muted text in dark mode */
    --color-text-on-primary-light: white;  /* Text on primary (green) background */
    --color-text-on-primary-dark: #333;    /* Text on primary (now white) background in dark mode */

    /* Input Field Colors */
    --color-input-bg-light: #ffffff;
    --color-input-bg-dark: #3a3f44;
    --color-input-border-light: #ddd;
    --color-input-border-dark: #444;

    /* Step Indicator Colors */
    --color-step-dot-inactive-light: #ccc;
    --color-step-dot-inactive-dark: #555;


    /* Shadow Colors */
    --color-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.06);
    --color-shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Specific RGB for rgba() usage (for primary color) */
    --color-primary-rgb: 85, 166, 48; /* RGB for #55A630 */
    --color-primary-dark-rgb: 255, 255, 255; /* RGB for #ffffff (new primary in dark mode) */
}

a {
    text-decoration: none !important;
}

/* Dark Mode Overrides - Apply variables */
.dark {
    --color-bg-light: var(--color-bg-dark);
    --color-card-light: var(--color-card-dark);
    --color-primary-light: var(--color-primary-dark);
    --color-text-default-light: var(--color-text-default-dark);
    --color-text-light-light: var(--color-text-light-dark);
    --color-text-on-primary-light: var(--color-text-on-primary-dark);
    --color-border-light: var(--color-border-dark);
    --color-shadow-light: var(--color-shadow-dark);
}

/* --- Bottom Navbar --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-card-light);
    /* White in light mode, Dark grey in dark mode */
    border-top: 1px solid var(--color-border-light);
    /* Light border in light mode, Dark border in dark mode */
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    /* Consider using a shadow variable */
}

.bottom-nav a {
    text-align: center;
    color: var(--color-text-light-light);
    /* Lighter grey text */
    font-size: 13px;
}

.bottom-nav a i {
    font-size: 18px;
    display: block;
}

.bottom-nav a.active {
    color: var(--color-primary-light);
    /* Active link color */
}

.dark .bottom-nav a.active {
    color: var(--color-primary-light);
}

/* Adding Poppins font from Google Fonts (if you want to use it) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');