/* @media (prefers-color-scheme: light) { */
/*     :root { */
/*         /\* based on colours from assets/scss/colors/white.scss *\/ */
/*         --color-background: #FFFFFF; */
/*         --color-footer-mobile-1:  color-mix(in srgb, var(--color-background), #000 2%); */
/*         --color-footer-mobile-2: color-mix(in srgb, var(--color-background), #000 10%); */
/*         --color-background-code: color-mix(in srgb, var(--color-background), #000 2%); */
/*         --color-border: #666; */
/*         --color-meta: #666; */
/*         --color-meta-code: color-mix(in srgb, var(--color-meta), #fff 10%); */
/*         --color-link: rgba(212, 128, 170, 1); */
/*         --color-text: #383838 */
/*         --color-accent-3: #8c8c8c; */
/*         --color-accent-2: #383838; */
/*         --color-accent-1: #2bbc8a; */
/*         --color-quote: #2bbc8a; */
/*     } */
/* } */
/* @media (prefers-color-scheme: dark) { */
/*     :root { */
/*         /\* based on colours from assets/scss/colors/dark.scss *\/ */
/*         --color-background: #1d1f21; */
/*         --color-footer-mobile-1: color-mix(in srgb, var(--color-background), #fff 2%); */
/*         --color-footer-mobile-2: color-mix(in srgb, var(--color-background), #fff 10%); */
/*         --color-background-code: color-mix(in srgb, var(--color-background), #fff 2%); */
/*         --color-border: #666; */
/*         --color-meta: #666; */
/*         --color-meta-code: #666; */
/*         --color-link: rgba(212, 128, 170, 1); */
/*         --color-text: #c9cacc; */
/*         --color-accent-3: #cccccc; */
/*         --color-accent-2: #eeeeee; */
/*         --color-accent-1: #2bbc8a; */
/*         --color-quote: #ccffb6; */
/*     } */
/* } */

@media (prefers-color-scheme: light) {
    :root {
        /* based on colours from assets/scss/colors/white.scss */
        --color-background: #FFFFFF;
        --color-footer-mobile-1:  color-mix(in srgb, var(--color-background), #000 2%);
        --color-footer-mobile-2: color-mix(in srgb, var(--color-background), #000 10%);
        --color-background-code: color-mix(in srgb, var(--color-background), #000 2%);
        --color-border: #666;
        --color-meta: #666;
        --color-meta-code: color-mix(in srgb, var(--color-meta), #fff 10%);
        --color-link: rgba(2, 136, 209, 1); /* Darker ocean blue */
        --color-text: #383838;
        --color-accent-3: #8c8c8c;
        --color-accent-2: #383838;
        --color-accent-1: #0288d1; /* Darker cyan-blue */
        --color-quote: #01579b; /* Even deeper blue for quotes */
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        /* based on colours from assets/scss/colors/dark.scss */
        --color-background: #1d1f21;
        --color-footer-mobile-1: color-mix(in srgb, var(--color-background), #fff 2%);
        --color-footer-mobile-2: color-mix(in srgb, var(--color-background), #fff 10%);
        --color-background-code: color-mix(in srgb, var(--color-background), #fff 2%);
        --color-border: #666;
        --color-meta: #666;
        --color-meta-code: #666;
        --color-link: rgba(79, 195, 247, 1); /* Lighter cyan-blue */
        --color-text: #c9cacc;
        --color-accent-3: #cccccc;
        --color-accent-2: #eeeeee;
        --color-accent-1: #4fc3f7; /* Light cyan-blue for dark mode */
        --color-quote: #81d4fa; /* Even lighter for readability */
    }
}