:root {
    /* @group colors */
    --color-primary: #0A0A0A;           /* Primary */
    --color-primary-light: #241B20;     /* Primary Light */
    --color-secondary: #3A3324;         /* Secondary */
    --color-accent: #D4AF37;            /* Accent */
    --color-accent-light: #F3E5AB;      /* Accent Light */
    --color-cta: #C9A227;               /* CTA */
    --color-bg: #0A0A0A;                /* Background */
    --color-surface: #141115;           /* Surface */
    --color-text: #F8FAFC;              /* Text */
    --color-text-secondary: #D6CEC3;    /* Secondary Text */
    --color-text-muted: #A39B8F;        /* Muted Text */
    --color-border: #2A2420;            /* Border */
    --color-border-light: #3A3324;      /* Border Light */
    --color-ivory: #FAF5F0;             /* Ivory Section */
    --color-herbal: #10B981;            /* Herbal Accent */
    --color-whatsapp: #25D366;          /* WhatsApp Green */

    /* @group fonts */
    --font-heading: 'Cormorant', Georgia, 'Times New Roman', serif;         /* Heading Font */
    --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;         /* Body Font */
    --font-size-base: 16px;                                                 /* Base */
    --font-weight-heading: 500;                                             /* Heading Weight */

    /* @group borderRadius */
    --radius-sm: 2px;                   /* Small Radius */
    --radius-md: 4px;                   /* Medium Radius */
    --radius-lg: 10px;                  /* Large Radius */

    /* @group spacing */
    --spacing-sm: 12px;                 /* Small Spacing */
    --spacing-base: 24px;               /* Base Spacing */
    --spacing-lg: 72px;                 /* Large Spacing */

    /* @group shadows */
    --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.4);            /* Small Shadow */
    --shadow-base: 0 12px 32px rgba(10, 10, 10, 0.38);       /* Base Shadow */
    --shadow-lg: 0 24px 60px rgba(10, 10, 10, 0.5);          /* Large Shadow */
}