/* =========================
   Global Design System
========================== */

:root {

    /* Colors */
    --color-primary: #4f7d32;
    --color-primary-dark: #31551f;
    --color-primary-light: #edf5df;

    --color-accent: #e7b83c;
    --color-accent-dark: #c89516;

    --color-dark: #20251c;
    --color-text: #4d5548;
    --color-muted: #73796f;

    --color-white: #ffffff;
    --color-light: #f8faf4;
    --color-cream: #fffaf0;

    --color-border: #e2e7dc;


    /* Typography */
    --font-primary: "Noto Sans Bengali",
                    "Hind Siliguri",
                    sans-serif;

    --font-size-base: 16px;

    --line-height-body: 1.7;
    --line-height-heading: 1.25;


    /* Layout */
    --container-width: 1180px;
    --container-padding: 20px;


    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;


    /* Shadow */
    --shadow-sm: 0 4px 15px rgba(32, 37, 28, 0.08);
    --shadow-md: 0 10px 30px rgba(32, 37, 28, 0.12);
    --shadow-lg: 0 20px 50px rgba(32, 37, 28, 0.16);


    /* Transition */
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
}


/* =========================
   Base
========================== */

html {
    font-size: var(--font-size-base);
}

body {
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-primary);
    line-height: var(--line-height-body);
}


/* =========================
   Typography
========================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-dark);
    font-weight: 700;
}

p {
    color: var(--color-text);
}


/* =========================
   Container
========================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* =========================
   Common Buttons
========================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 50px;
    padding: 10px 22px;

    border-radius: var(--radius-pill);

    font-size: 15px;
    font-weight: 700;

    transition:
        transform var(--transition),
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--color-white);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-dark);
}


/* =========================
   Responsive Container
========================== */

@media (max-width: 768px) {

    :root {
        --container-padding: 16px;
    }

    .btn {
        min-height: 48px;
        padding-inline: 20px;
    }
}