* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    background-color: var(--bg-color-primary);
    color: var(--text-color-primary);
    overflow-x: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Show scrollbar (removes the hidden scrollbar CSS) */
body::-webkit-scrollbar {
    display: block !important;
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

:root {

    --static-nav-color: #e4e6eb;
    /*--------------  Sub-heading-text --------------*/
    --h3-font-size: clamp(1.375rem, 3.5vw, 2.25rem);
    /* 22px - 36px */
    --h3-font-weight: 700;

    --btn-color: #4a4a4a;

    --line-height: 1.6;
    --container-max-width: 1400px;

    /*--------------  Text Color --------------*/
    --bright-white: #ffffff;
    --light-white: #f2f2f2;
    --accent-color: #d323ff;
    --blue-accent: #6c5ce7;
    --bright-dark: #1a1a2e;
    --light-dark: #2d2d44;


    --footer-light: #9CA3AF;

    /* --text-color-primary: #e4e6eb; */
    --text-color-secondary: #b0b3bf;

    --heading-color-primary: #f0f2f6;


    --highlight-purple-color: linear-gradient(to right bottom, rgb(144, 0, 255), rgb(204, 0, 255));


    --text-size-primary: clamp(0.9375rem, 1.5vw, 1.125rem);
    /* 15px - 18px */
    --text-size-secondary: clamp(0.875rem, 1.2vw, 1rem);
    /* 14px - 16px */
    --text-size-small: clamp(0.75rem, 1vw, 0.875rem);
    /* 12px - 14px */


    /* ---- Heading Sizes (Universal using clamp) ---- */
    --h1-font-size: clamp(1.9rem, 5vw, 3.8rem);
    /* 32px - 72px */
    --h1-font-weight: 900;

    --h2-font-size: clamp(2rem, 4vw, 3rem);
    --h2-font-weight: 800;


    --h4-font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    /* 18px - 28px */
    --h4-font-weight: 600;

    --h5-font-size: clamp(1rem, 2vw, 1.375rem);
    /* 16px - 22px */
    --h5-font-weight: 600;

    --h6-font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    /* 14px - 18px */
    --h6-font-weight: 600;


    --topbar-height: clamp(61px, 6.1vh, 80px);
    --container-max-width: 1400px;


    /* ===== Navbar & Banner Heights (Universal using clamp) ===== */
    --navbar-height: clamp(60px, 8vh, 80px);
    /* 60px - 80px */
    --banner-height: clamp(30px, 4vh, 40px);
    /* 30px - 40px */

}

/* ===== DARK THEME ===== */
[data-theme='dark'] body {
    --bg-color-alternate: #2f094c;
    /*DARK PURPLE*/
    --bg-color-primary: #0f1117;
    --bg-color-secondary: #1a1d27;

    --heading-color-primary: #f0f2f6;
    --heading-color-secondary: #c8cbd1;

    --border-color-primary: #2a2d3a;
    --border-color-secondary: #3a3d4a;

    --banner-background-color: #ffde59;
    --banner-text-color: #4e2780;

    --topbar-color-primary: #1a1d27;

    --navbar-color-primary: #1a1d27;
    --navbar-color-secondary: #2a2d3a;

    --text-color-primary: #e4e6eb;
    --text-color-secondary: #b0b3bf;

    --highlight-color: #ffde59;
}

/* ===== LIGHT THEME ===== */
[data-theme='light'] body {
    --bg-color-alternate: #d6bdeda1;
    /* LIGHT PURPLE */
    --bg-color-primary: #ffffff;
    --bg-color-secondary: #f4f6fa;

    --heading-color-primary: #1a1a2e;
    --heading-color-secondary: #2d2d44;

    --border-color-primary: #e0e4ea;
    --border-color-secondary: #ffffff;

    --banner-background-color: #4e2780;
    --banner-text-color: #ffde59;

    --topbar-color-primary: #ffffff;


    --navbar-color-primary: #ffffff;
    --navbar-color-secondary: #f4f6fa;

    --text-color-primary: #1e1e2e;
    --text-color-secondary: #4a4a5a;

    --highlight-color: #4e2780;
}