@media (prefers-color-scheme: dark) {

    :root {

    /* =====================================================
       MAIN COLOURS
       ================================================== */

        --color-blue-900: #24344D;
        --color-blue-700: #018DF4;
        --color-blue-500: #01B1F4;
        --color-blue-300: #65D4FF;
        --color-blue-100: #CCEFFD;

        --color-blue-rgb: 1, 176, 244;

        --color-yellow-900: #4D3100;
        --color-yellow-700: #DD9A23;
        --color-yellow-500: #FAB73F;
        --color-yellow-300: #FFD891;
        --color-yellow-100: #F7F0E3;

        --color-yellow-rgb: 250, 183, 63;


    /* =====================================================
       SEMANTIC COLOURS
       ================================================== */

        --color-bg: var(--color-grey-900);
        --color-bg-inverse: var(--color-grey-900);

        --color-surface: var(--color-grey-800);
        --color-surface-raised: var(--color-grey-800);
        --color-surface-raised-alpha-80: rgba(var(--color-black-rgb), 80%);

        --color-heading: var(--color-white);
        --color-heading-secondary: var(--color-white);

        --color-subheading: var(--color-primary-soft);
        --color-subheading-secondary: var(--color-secondary-soft);

        --color-text: var(--color-grey-100);
        --color-text-inverse: var(--color-white);

        --color-border: var(--color-grey-700);
        --color-border-light: var(--color-grey-800);
        --color-border-strong: var(--color-grey-800);
        --color-border-inverse: var(--color-grey-600);
        --color-border-inverse-alpha-20: rgba(var(--color-white-rgb), 20%);

        --color-primary: var(--color-xxx-500);
        --color-primary-hover: var(--color-xxx-300);
        --color-primary-focus: var(--color-xxx-100);
        --color-primary-soft: var(--color-xxx-900);
        --color-primary-rgb: var(--color-xxx-rgb);

        --color-secondary: var(--color-yyy-500);
        --color-secondary-hover: var(--color-yyy-300);
        --color-secondary-focus: var(--color-yyy-100);
        --color-secondary-soft: var(--color-yyy-900);
        --color-secondary-rgb: var(--color-yyy-rgb);

        --color-ui-muted: rgba(var(--color-white-rgb), 10%);

        --color-overlay: var(--color-black-rgb);
        
        --color-shadow: rgba(var(--color-black-rgb), 50%);


    /* =====================================================
       SEMANTIC GRADIENTS
       ================================================== */

        --gradient-primary: linear-gradient(90deg, var(--color-blue-500) 0%, var(--color-blue-300) 100%);
        --gradient-secondary: linear-gradient(90deg, var(--color-yellow-500) 0%, var(--color-yellow-300) 100%);

    }


/* =====================================================
   FORMS (CONTACT FORM 7)
   ================================================== */

   /* General */

        select {
            background-image: url("/wp-content/themes/bb-theme-child/assets/images/icons/ui/chevron-white.svg") !important;
        }


}