/* @import url("/Styles/Library/vars.css"); */
/* This file contains CSS variables for the Accounting Completed website.
    It defines colors, fonts, and other design tokens used throughout the site.
    I'm setting up data-bs-theme attributes for light and dark modes in common.js. */

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@300;400;700;900&family=Cousine:wght@400;700&family=Cutive+Mono&display=swap");

:root {
    color-scheme: light dark;
    --color-primary: hsl(203, 60%, 58%);
    --color-secondary: hsl(208, 94%, 25%);
    --color-accent: hsl(36, 91%, 54%);
    --color-text: hsl(0, 0%, 20%);
    --color-text-light: hsl(0, 0%, 94%);
    --color-bg-light: hsl(0, 0%, 98%);
    --color-bg-light-trans: hsla(0, 0%, 98%, 0.75);
    --color-bg-dark: hsl(0, 0%, 100%);
    --color-bg-dark-trans: hsla(0, 0%, 100%, 0.75);
    --dcolor-accent: hsl(260, 60%, 65%);
    --dcolor-text: hsl(0, 0%, 94%);
    --dcolor-bg-light: hsl(230, 16%, 30%);
    --dcolor-bg-light-trans: hsla(230, 16%, 30%, 0.5);
    --dcolor-bg-dark: hsl(240, 21%, 15%);
    --dcolor-bg-dark-trans: hsla(240, 21%, 12%, 0.75);
    --font-base: 'Karla', Arial, sans-serif;
    --font-mono: 'Cousine', monospace;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --bs-body-font-family: var(--font-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-line-height: var(--line-height-base);
    --bs-body-bg: var(--color-bg-dark);
    --bs-body-color: var(--color-text);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 84, 163, 212;
    --bs-link-hover-color: darken(--bs-link-color, 10%);
    --bs-link-hover-color-rgb: 4, 68, 124;
    --bs-border-color: var(--color-bg-light-trans);
    --bs-accordion-border-color: var(--color-bg-light-trans);
    --bs-card-border-color: var(--bs-border-color);
    --bs-navbar-bg: var(--color-bg-light-trans);
    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-secondary);
    --bs-warning: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
        color-scheme: dark;
        --color-accent: var(--dcolor-accent);
        --color-text: var(--dcolor-text);
        --color-bg-dark: var(--dcolor-bg-dark);
        --color-bg-dark-trans: var(--dcolor-bg-dark-trans);
        --color-bg-light: var(--dcolor-bg-light);
        --color-bg-light-trans: var(--dcolor-bg-light-trans);
    }
}

:root[data-bs-theme="light"] {
    color-scheme: light;
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 84, 163, 212;
    --bs-link-hover-color: darken(--bs-link-color, 10%);
    --bs-link-hover-color-rgb: 4, 68, 124;
}

:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --color-accent: var(--dcolor-accent);
    --color-text: var(--dcolor-text);
    --color-bg-dark: var(--dcolor-bg-dark);
    --color-bg-dark-trans: var(--dcolor-bg-dark-trans);
    --color-bg-light: var(--dcolor-bg-light);
    --color-bg-light-trans: var(--dcolor-bg-light-trans);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 84, 163, 212;
    --bs-link-hover-color: hsl(203, 70%, 78%);
    --bs-link-hover-color-rgb: 160, 208, 238;
}

.navbar-nav, .btn, .card {
    --bs-navbar-color: var(--bs-link-color);
    --bs-navbar-hover-color: var(--bs-link-hover-color) !important;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-card-bg: var(--color-bg-light);
}
#theme-switch {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    line-height: 2rem;
    border-radius: 1em;
}

    #theme-switch .bi, #theme-switch .fa {
        font-size: 1.25rem;
        display: none;
    }

    #theme-switch input:checked ~ .bi-moon,
    #theme-switch input:checked ~ .fa-moon-o {
        display: inline-block;
    }

    #theme-switch input:not(:checked) ~ .bi-sun,
    #theme-switch input:not(:checked) ~ .fa-sun-o {
        display: inline-block;
    }

@media (forced-colors: active) {
    * {
        forced-color-adjust: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}