:root {
    /* @group colors */
    --color-primary: #F97316;              /* Primary */
    --color-primary-light: #FB923C;        /* Primary Light */
    --color-primary-dark: #C2410C;         /* Primary Dark */
    --color-cta: #2563EB;                  /* CTA */
    --color-bg: #FFF7ED;                   /* Background */
    --color-surface: #FFFFFF;              /* Surface */
    --color-text: #7C2D12;                 /* Text */
    --color-text-secondary: #9A3412;       /* Secondary Text */
    --color-text-muted: #78716C;           /* Muted Text */
    --color-border: #FED7AA;               /* Border */
    --color-border-light: #FFEDD5;         /* Border Light */

    /* @group fonts */
    --font-heading: 'Outfit', 'Segoe UI', sans-serif;   /* Heading Font */
    --font-body: 'Work Sans', 'Segoe UI', sans-serif;   /* Body Font */

    /* @group borderRadius */
    --radius-sm: 0.25rem;                  /* Small Radius */
    --radius-md: 0.5rem;                   /* Medium Radius */
    --radius-lg: 0.75rem;                  /* Large Radius */

    /* @group shadows */
    --shadow-sm: 0 1px 2px rgba(124, 45, 18, 0.06);      /* Small Shadow */
    --shadow-base: 0 4px 16px rgba(124, 45, 18, 0.08);   /* Base Shadow */
}