:root {
    /* @group colors */
    --color-primary: #3A2A1F; /* Primary */
    --color-primary-light: #5C4534; /* Primary Light */
    --color-primary-dark: #201510; /* Primary Dark */
    --color-accent: #C8862A; /* Accent */
    --color-accent-light: #E7B564; /* Accent Light */
    --color-secondary: #7C8B6F; /* Secondary */
    --color-cta: #A85B22; /* CTA */
    --color-cta-light: #C97F3E; /* CTA Light */
    --color-cta-dark: #7E4218; /* CTA Dark */
    --color-bg: #FBF6EC; /* Background */
    --color-surface: #FFFFFF; /* Surface */
    --color-text: #2E211A; /* Text */
    --color-text-secondary: #5B4A3E; /* Secondary Text */
    --color-text-muted: #8A7A6E; /* Muted Text */
    --color-border: #E3D6C3; /* Border */
    --color-border-light: #F0E7D9; /* Border Light */

    /* @group fonts */
    --font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif; /* Heading Font */
    --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; /* Body Font */
    --font-size-base: 16px; /* Base */
    --font-weight-heading: 600; /* Heading Weight */

    /* @group borderRadius */
    --radius-sm: 6px; /* Small Radius */
    --radius-md: 14px; /* Medium Radius */
    --radius-lg: 24px; /* Large Radius */

    /* @group spacing */
    --spacing-sm: 0.75rem; /* Small Spacing */
    --spacing-base: 1.5rem; /* Base Spacing */
    --spacing-lg: 4rem; /* Large Spacing */

    /* @group shadows */
    --shadow-sm: 0 1px 2px rgba(46, 33, 26, 0.06); /* Small Shadow */
    --shadow-base: 0 10px 24px -12px rgba(46, 33, 26, 0.18); /* Base Shadow */
    --shadow-lg: 0 24px 60px -24px rgba(46, 33, 26, 0.28); /* Large Shadow */
}