:root {
    --primary-50: #f5f1f0;
    --primary-50-rgb: 245, 241, 240;
    --primary-100: #ebe3e0;
    --primary-100-rgb: 235, 227, 224;
    --primary-200: #d6c8c2;
    --primary-200-rgb: 214, 200, 194;
    --primary-300: #c2aca3;
    --primary-300-rgb: 194, 172, 163;
    --primary-400: #ad9185;
    --primary-400-rgb: 173, 145, 133;
    --primary-500: #a18072;
    --primary-500-rgb: 161, 128, 114;
    --primary-600: #8c6b5e;
    --primary-600-rgb: 140, 107, 94;
    --primary-700: #74584d;
    --primary-700-rgb: 116, 88, 77;
    --primary-800: #5b463d;
    --primary-800-rgb: 91, 70, 61;
    --primary-900: #42332c;
    --primary-900-rgb: 66, 51, 44;
    --secondary-50: #f5f1f0;
    --secondary-50-rgb: 245, 241, 240;
    --secondary-100: #ebe3e0;
    --secondary-100-rgb: 235, 227, 224;
    --secondary-200: #d6c7c2;
    --secondary-200-rgb: 214, 199, 194;
    --secondary-300: #c2aba3;
    --secondary-300-rgb: 194, 171, 163;
    --secondary-400: #ad8f85;
    --secondary-400-rgb: 173, 143, 133;
    --secondary-500: #846358;
    --secondary-500-rgb: 132, 99, 88;
    --secondary-600: #70544b;
    --secondary-600-rgb: 112, 84, 75;
    --secondary-700: #5c453e;
    --secondary-700-rgb: 92, 69, 62;
    --secondary-800: #493630;
    --secondary-800-rgb: 73, 54, 48;
    --secondary-900: #352823;
    --secondary-900-rgb: 53, 40, 35;
    --wood-50: #f5f1f0;
    --wood-50-rgb: 245, 241, 240;
    --wood-100: #ebe3e0;
    --wood-100-rgb: 235, 227, 224;
    --wood-200: #d6c8c2;
    --wood-200-rgb: 214, 200, 194;
    --wood-300: #c2aca3;
    --wood-300-rgb: 194, 172, 163;
    --wood-400: #ad9185;
    --wood-400-rgb: 173, 145, 133;
    --wood-500: #a18072;
    --wood-500-rgb: 161, 128, 114;
    --wood-600: #8c6b5e;
    --wood-600-rgb: 140, 107, 94;
    --wood-700: #74584d;
    --wood-700-rgb: 116, 88, 77;
    --wood-800: #5b463d;
    --wood-800-rgb: 91, 70, 61;
    --wood-900: #42332c;
    --wood-900-rgb: 66, 51, 44;
    --brand-primary: #a18072;
    --primary-color: #a18072;
    --secondary-color: #846358;
    --background-color: #f5f1f0;
    --text-color: #42332c;
    --border-color: #d6c8c2;
    --muted-color: #ad9185;
    --btn-primary: #a18072;
    --btn-primary-hover: #8c6b5e;
    --btn-secondary: #846358;
    --btn-secondary-hover: #70544b;
    --accent-color: #846358;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;

    /* Spacing Variables - Mobile First */
    --section-padding-y: 1.25rem;
    --section-padding-x: 0.75rem;
    --card-padding: 1rem;
    --container-max-width: 1280px;

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgba(67, 48, 43, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(67, 48, 43, 0.1), 0 2px 4px -1px rgba(67, 48, 43, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(67, 48, 43, 0.1), 0 4px 6px -2px rgba(67, 48, 43, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(67, 48, 43, 0.1), 0 10px 10px -5px rgba(67, 48, 43, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(67, 48, 43, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
}

/* Responsive spacing adjustments */
@media (min-width: 640px) {
    :root {
        --section-padding-y: 2rem;
        --section-padding-x: 1rem;
        --card-padding: 1.25rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --section-padding-y: 3rem;
        --section-padding-x: 1.5rem;
        --card-padding: 1.5rem;
    }
}