:root {
    /* --- Fonts --- */
    --mv-font-body: "Noto Sans", sans-serif;
    --mv-font-heading: "Pacifico", cursive;
    --mv-font-card: "Roboto", sans-serif;

    /* --- Font sizes (fluid) --- */
    --mv-fs-h1: clamp(30px, calc(4.23vw + 16.56px), 80px);
    --mv-fs-h2: clamp(16px, 2vw, 20px);
    --mv-fs-badge: clamp(0.65rem, 1vw, 0.8rem);

    /* --- Spacing (fluid) --- */
    --mv-space-xs: clamp(6px, 1vw, 10px);
    --mv-space-sm: clamp(10px, 2vw, 20px);
    --mv-space-md: clamp(16px, 2.5vw, 30px);
    --mv-space-lg: clamp(24px, 4vw, 48px);
    --mv-space-gap: clamp(0.5rem, 2vw, 1rem);

    /* --- Card --- */
    --mv-card-min-h: clamp(280px, 30vw, 380px);
    --mv-card-bottom: clamp(40px, 5vw, 60px);
    --mv-card-radius: 12px;

    /* --- Card accent colors (unchanged in both themes) --- */
    --mv-purple: #6824d6;
    --mv-red: #fe3258;
    --mv-green: #4ccda7;
    --mv-orange: #ffa500;
    --mv-pink: #a906ea;

    /* --- Shadows (per accent) --- */
    --mv-shadow-purple: 5px 18px 13px rgba(104, 36, 214, 0.45);
    --mv-shadow-red: 5px 18px 13px rgba(254, 50, 88, 0.45);
    --mv-shadow-green: 5px 18px 13px rgba(76, 205, 167, 0.45);
    --mv-shadow-orange: 5px 18px 13px rgba(255, 165, 0, 0.45);
    --mv-shadow-pink: 5px 18px 13px rgba(169, 6, 234, 0.45);

    /* --- Transitions --- */
    --mv-transition: 0.35s ease;

    /* --- Selection --- */
    --mv-selection-bg: #2bec72;

    /* ==========================================================
       LIGHT THEME DEFAULTS
       Yahan se sab light mode ka base set hota hai.
       Dark mode mein sirf yahi variables override honge —
       baaki sab automatically follow karenge.
       ========================================================== */



    /* Body text + heading */
    --mv-color-text: #000000;
    --mv-color-heading: #000000;

    /* Badge */
    --mv-color-badge-bg: #ffbb7b;
    --mv-color-badge-text: #5c0404;

    /* Cards */
    --mv-card-bg: #ebecee;
    --mv-card-inner-bg: #ffffff;

    /* Theme button */
    --mv-btn-bg: #ffffff;
    --mv-btn-color: #000000;



    --background: #00000063;

    /* Theme button label — light pe "Dark" dikhao (matlab dark mein jaoge) */
    --mv-btn-label: "Dark";
    --mv-btn-icon: "🌙";
}


[data-theme="dark"] {


    --background: #ffffff12;

    --mv-color-text: #e0e0e0;
    --mv-color-heading: #ffffff;

    --mv-color-badge-bg: #4a2a00;
    --mv-color-badge-text: #ffcc88;

    --mv-card-bg: #1e1e2e;
    --mv-card-inner-bg: linear-gradient(0deg, rgba(255, 255, 255, 0)20%, white 5%, rgb(24, 106, 192));

    --mv-btn-bg: #2a2a3e;
    --mv-btn-color: #ffffff;
}




/* Reset styles - no class conflicts possible */
/* ============================================================
   RESET
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;

    /* FIXED */
    overflow-x: hidden;
    overflow-y: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 12px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

.fixed_bg__layer {
    position: fixed;
    inset: 0;
    background-image: url('./assets/indexBanner.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: bankBgMove 60s linear infinite;
    z-index: -2;
}

/* fixed back button */
.mv-top-link {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    padding: 10px 16px;
    /* border-radius: 12px; */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: 0.2s ease;
}

.mv-top-link:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.8);
}