:root {
    /* @group colors */
    --color-primary: #103E8C;        /* Primary brand color */
    --color-primary-dark: #0A2A63;   /* Primary dark / hover */
    --color-primary-light: #EAF1FB;  /* Soft blue section */
    --color-accent: #1F6FBD;         /* Secondary lake blue */
    --color-bg: #F5F7FA;             /* Page background */
    --color-surface: #FFFFFF;        /* Surface and cards */
    --color-text: #222B33;           /* Main text */
    --color-text-secondary: #5B6673; /* Secondary text */
    --color-border: #DCE3EC;         /* Divider and border */
    --color-error: #B3261E;          /* Error message */
    --color-footer-bg: #F5F7FA;      /* Footer background */
    --color-footer-text: #222B33;    /* Footer text */
    --color-footer-muted: #5B6673;   /* Footer muted text */
    --color-overlay: rgba(10, 30, 62, 0.78); /* Dark blue overlay for media and lightbox */

    /* @group fonts */
    --font-heading: 'Noto Sans', 'Segoe UI', Arial, sans-serif; /* Heading font */
    --font-body: 'Noto Sans', 'Segoe UI', Arial, sans-serif;    /* Body font */
    --font-size-base: 17px;          /* Base body size */

    /* @group borderRadius */
    --radius-sm: 6px;                /* Small radius */
    --radius-md: 8px;                /* Button and input radius */
    --radius-lg: 12px;               /* Image and card radius */

    /* @group spacing */
    --spacing-sm: 16px;              /* Small spacing */
    --spacing-base: 32px;            /* Base spacing */
    --spacing-lg: 88px;              /* Section spacing */

    /* @group shadows */
    --shadow-sm: 0 1px 2px rgba(16, 62, 140, 0.06), 0 6px 16px rgba(16, 62, 140, 0.08); /* Small shadow */
}