:root {
    /* Primary – deep navy */
    --color-primary: #0A1F44;        /* Used for main branding, header background, primary buttons */
    --color-primary-dark: #071932;   /* Hover/focus states for primary elements */
    --color-primary-light: #274C96;  /* Accent borders, subtle highlights */

    /* Secondary – soft teal */
    --color-secondary: #2A9D8F;        /* Secondary CTA, links, tag badges */
    --color-secondary-dark: #20766A;  /* Hover/focus for secondary */
    --color-secondary-light: #71C9C0; /* Light backgrounds for cards */

    /* Neutral greys */
    --color-gray-100: #F7FAFC;        /* Page background */
    --color-gray-200: #E2E8F0;        /* Section separators */
    --color-gray-300: #CBD5E1;        /* Input borders */
    --color-gray-400: #94A3B8;        /* Disabled text */
    --color-gray-500: #64748B;        /* Body text */
    --color-gray-600: #475569;        /* Sub‑headings */

    /* Success / Error */
    --color-success: #2E7D32;         /* Success messages, check icons */
    --color-error: #C62828;           /* Error messages, cross icons */

    /* Text colours */
    --color-text-primary: var(--color-gray-600);
    --color-text-inverse: #FFFFFF;

    /* Backgrounds */
    --color-bg: var(--color-gray-100);
    --color-card-bg: #FFFFFF;
}