:root {
    /* ===== Brand Colors ===== */
    --primary: #c1554d;
    --primary-dark: #a84540;
    --primary-light: #d4776f;

    --secondary: #4a3428;
    --secondary-light: #6b4e3d;
    --accent: #8b6f47;

    /* ===== Background Colors ===== */
    --bg-main: #ffffff;
    --bg-light: #faf8f5;
    --bg-gray: #f5f5f5;

    /* ===== Text Colors ===== */
    --text-main: #333333;
    --text-light: #666666;
    --text-muted: #999999;

    /* ===== Shadows ===== */
    --shadow-xs: rgba(0, 0, 0, 0.05);
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-primary: rgba(193, 85, 77, 0.4);
    --shadow-primary-light: rgba(193, 85, 77, 0.3);

    /* ===== Overlays ===== */
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(0, 0, 0, 0.5);
}

/* ===== Background Utilities ===== */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-light { background-color: var(--bg-light); }
.bg-white { background-color: var(--bg-main); }

/* ===== Text Utilities ===== */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }

/* ===== Shadow Utilities ===== */
.shadow-xs { box-shadow: 0 2px 6px var(--shadow-xs); }
.shadow-sm { box-shadow: 0 4px 10px var(--shadow-sm); }
.shadow-md { box-shadow: 0 6px 18px var(--shadow-md); }
.shadow-primary { box-shadow: 0 6px 18px var(--shadow-primary); }