:root {
    /* PRIMARY COLOURS */
    --color-primary: #1d4ed8;
    --color-dark-primary: #3b82f6;
    /* FOCUS COLOURS */
    --color-primaryFocus: #4b9cd4;
    /* SECONDARY COLOURS */
    --color-secondary: #ffffff;
    --color-dark-secondary: #2c5282;
    /* TERTIARY COLOURS */
    --color-tertiary: #4687C5;
    --color-dark-tertiary: #4a5568;
    /* HIGHLIGHT COLOURS */
    --color-highlight: #7dd3fc;
    --color-dark-highlight: #63b3ed;
    /* BACKGROUND COLOURS */
    --color-background: #fafafafa;
    --color-dark-background: #000000;
    --color-background-secondary: #fafafa;
    --color-dark-background-secondary: #000000;
    --color-background-tertiary: #f4f4ff;
    --color-dark-background-tertiary: #000000;
    /* DISABLED */
    --color-disabled: #f9fafb;
    --color-dark-disabled: #e5e7eb;
    /* HOVER BACKGROUNDS */
    --color-hover-background: #d1d5db;
    --color-dark-hover-background: #4B5563;
    /* BORDER */
    --color-border-primary: #d1d5db;
    --color-dark-border-primary: #6c6e70;
    /* TEXT COLORS */
    --color-text-primary: #000000;
    --color-dark-text-primary: #ffffff;
    --color-text-secondary: #6c6e70;
    --color-dark-text-secondary: #9ca3af;
    /* HOVER CUSTOM */
    --color-hover-custom: #93c5fd;
    --color-dark-hover-custom: #3b82f6;
}