@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg-color: #111827;
    --bg-secondary: #1a2233;
    --card-bg: #1e293b;
    --card-hover-bg: #243044;

    --text-color: #f0f4ff;
    --text-secondary: #94a3b8;
    --text-muted: #4b5a72;

    --main-color: #0ef;
    --main-color-alt: #00c6ff;
    --main-color-dark: #00a0cc;
    --accent-glow: rgba(0, 238, 255, 0.28);
    --accent-glow-soft: rgba(0, 238, 255, 0.08);
    --accent-glow-medium: rgba(0, 238, 255, 0.18);

    --border-color: rgba(0, 238, 255, 0.18);
    --border-subtle: rgba(255, 255, 255, 0.06);

    /* Gradients */
    --gradient-main: linear-gradient(135deg, #0ef 0%, #00a0cc 100%);
    --gradient-hero: linear-gradient(160deg, #111827 0%, #0f1e30 60%, #0a1628 100%);
    --gradient-card: linear-gradient(145deg, #1e293b, #243044);

    --header-bg: rgba(17, 24, 39, 0.88);
    --navbar-mobile-bg: #111827;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 28px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 0 22px var(--accent-glow);
    --shadow-accent-strong: 0 0 44px var(--accent-glow);
}

body.light-mode {
    --bg-color: #f0f7ff;
    --bg-secondary: #e2eeff;
    --card-bg: #ffffff;
    --card-hover-bg: #eaf4ff;

    --text-color: #0a1628;
    --text-secondary: #3a5070;
    --text-muted: #7890a8;

    --main-color: #0099bb;
    --main-color-alt: #007fa0;
    --main-color-dark: #005f7a;
    --accent-glow: rgba(0, 153, 187, 0.22);
    --accent-glow-soft: rgba(0, 153, 187, 0.07);
    --accent-glow-medium: rgba(0, 153, 187, 0.14);

    --border-color: rgba(0, 153, 187, 0.22);
    --border-subtle: rgba(0, 0, 0, 0.07);

    --gradient-main: linear-gradient(135deg, #0099bb 0%, #0077aa 100%);
    --gradient-hero: linear-gradient(160deg, #f0f7ff 0%, #dff0fa 60%, #cce8f5 100%);

    --header-bg: rgba(240, 247, 255, 0.92);
    --navbar-mobile-bg: #f0f7ff;

    --shadow-sm: 0 2px 10px rgba(0, 153, 187, 0.08);
    --shadow-md: 0 6px 28px rgba(0, 153, 187, 0.12);
    --shadow-accent: 0 0 22px var(--accent-glow);
    --shadow-accent-strong: 0 0 44px var(--accent-glow);
}


*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    transition: background 0.4s ease, color 0.4s ease;
}

span {
    color: var(--main-color);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 4px;
}

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--gradient-main);
    z-index: 9999;
    transition: width 0.08s linear;
}

::selection {
    background: var(--main-color);
    color: #111;
}