/* =======================
   Base Theme Variables
========================== */
:root {
    /* Primary Colors */
    --color-primary: #7A6632;
    --color-primary-dark: #5c4e26;
    --color-primary-light: #9c8845;

    /* Secondary Colors */
    --color-secondary: #A9BA9D;
    --color-secondary-dark: #8da084;
    --color-secondary-light: #c3d3b8;

    /* Accent Color */
    --color-accent: #FFD700;

    /* Status Colors */
    --color-success: #50C878;
    --color-warning: #FFBF00;
    --color-error: #DC143C;

    /* Backgrounds */
    --color-background: #F9F9F4;
    --color-surface: #ffffff;

    /* Text Colors */
    --color-text-primary: #2E2E2E;
    --color-text-secondary: #556B2F;
    --color-text-inverse: #ffffff;
}

/* =======================
   Global Styles
========================== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* =======================
   Buttons
========================== */
button,
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

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

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

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

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

/* =======================
   Alerts
========================== */
.alert-success {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    padding: 12px;
    border-radius: 4px;
}

.alert-warning {
    background-color: var(--color-warning);
    color: var(--color-text-primary);
    padding: 12px;
    border-radius: 4px;
}

.alert-error {
    background-color: var(--color-error);
    color: var(--color-text-inverse);
    padding: 12px;
    border-radius: 4px;
}

/* =======================
   Cards / Containers
========================== */
.card {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 16px;
    margin: 16px 0;
}

/* =======================
   Utility Classes
========================== */
.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.text-accent {
    color: var(--color-accent);
}