:root {
    /* @group colors */
    --color-primary: #10214A;        /* Primary */
    --color-primary-light: #24406F;  /* Primary Light */
    --color-primary-dark: #0A1733;   /* Primary Dark */
    --color-accent: #C9A227;         /* Accent */
    --color-accent-light: #E3C55F;   /* Accent Light */
    --color-cta: #10214A;            /* CTA */
    --color-cta-light: #24406F;      /* CTA Light */
    --color-bg: #FFFFFF;             /* Background */
    --color-surface: #F5F7FA;        /* Surface */
    --color-text: #1B2437;           /* Text */
    --color-text-muted: #5A6478;     /* Muted Text */
    --color-border: #E3E7EE;         /* Border */

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

    /* @group borderRadius */
    --radius-sm: 8px;                /* Small Radius */
    --radius-md: 12px;               /* Medium Radius */
    --radius-lg: 20px;               /* Large Radius */

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

    /* @group shadows */
    --shadow-sm: 0 1px 2px rgba(16, 33, 74, 0.06);       /* Small Shadow */
    --shadow-base: 0 12px 32px rgba(16, 33, 74, 0.08);   /* Base Shadow */
    --shadow-lg: 0 24px 60px rgba(16, 33, 74, 0.14);     /* Large Shadow */
}