/* =========================================
   GLOBAL VARIABLES (Future mein sirf yahan changes honge)
   ========================================= */
:root {
    /* 🔴 FONT FAMILIES */
    --primary-font: 'Montserrat', sans-serif;
    --secondary-font: 'Arial', sans-serif; /* Agar headings ke liye alag font chahiye ho */

    /* 🔴 FONT WEIGHTS (Varying thickness) */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* 🔴 BRAND COLORS (Color control bhi yahin se karo) */
    --primary-color: #0073aa; /* Tera theme color */
    --text-dark: #111111;
    --text-light: #777777;
    --bg-light: #ffffff;
    --border-color: #eaeaea;
}

/* =========================================
   APPLYING VARIABLES
   ========================================= */

/* Poori website ka base */
body {
    font-family: var(--primary-font);
    font-weight: var(--fw-regular);
    color: var(--text-dark);
    background-color: var(--bg-light);
}

/* Headings ka style */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font); /* Yahan secondary-font bhi use kar sakte ho */
    font-weight: var(--fw-bold);
    color: var(--text-dark);
}

/* Logo (Agar text wala chal raha ho) */
.site-logo a {
    font-family: var(--primary-font);
    font-weight: var(--fw-extrabold);
    color: var(--text-dark);
}

/* Menu styling using variables */
.main-nav a {
    font-family: var(--primary-font);
    font-weight: var(--fw-semibold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    position: relative;
    padding-bottom: 5px;
}

/* Hover effect */
.main-nav a.active, 
.main-nav a:hover {
    color: var(--primary-color);
}