/* @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);
    --color-border-muted: #ccc;
    --color-border-strong: #454545;
    --color-border-header: #32323A;
    --color-panel-bg: #f1f1f1;
    --color-link-strong: #00188f;
    --color-table-fullspan-link: #318ac7;
    --color-primary-soft: #56a1d588;
    --color-secondary-soft: #00467f88;
    --color-text-strong: #000;
    --color-text-muted-strong: #4e4e4e;
    --color-modal-overlay: #000;
    --color-modal-overlay-dark: #181825;
    --color-warning: #c09853;
    --color-warning-focus: #a47e3c;
    --color-warning-glow: #dbc59e;
    --color-warning-bg: #fcf8e3;
    --color-error: #b94a48;
    --color-error-focus: #953b39;
    --color-error-glow: #d59392;
    --color-error-bg: #f2dede;
    --color-success: #468847;
    --color-success-focus: #356635;
    --color-success-glow: #7aba7b;
    --color-success-bg: #dff0d8;
    --color-info: #3a87ad;
    --color-info-focus: #2d6987;
    --color-info-glow: #7ab5d3;
    --color-info-bg: #d9edf7;
    --color-border-dashed-muted: #aaa;
    --color-checkbox-checked-bg: lightgreen;
    --color-checkbox-checked-border: darkgreen;
    --belowdate: 8px;
    --sm3font: 12pt;
    --color-midtone: hsl(0, 0%, 50%);
    --color-pink: #fab;
}

@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: hsl(203, 60%, 48%);
    --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, 60%, 78%);
    --bs-link-hover-color-rgb: 160, 208, 238;
}

.navbar, .navbar-nav, .btn, .card {
    --bs-navbar-color: var(--color-text);
    --bs-navbar-hover-color: var(--color-primary) !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 :is(.bi, .fa) {
        font-size: 1.25rem;
        display: none;
    }

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

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

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

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