/* assets/css/style.css */

/* Custom Properties (Theming & Accessibility overrides) */
:root {
    /* For accessibility font-scaling */
    --base-size: 16px;
    --scale-factor: 1;
}

/* Accessibility Modes (Controlled via JS classes on document.body) */
body.high-contrast {
    /* Force high contrast mode specifically for accessibility overrides */
    --primary: #ffff00;
    --primary-light: #ffff00;
    --primary-dark: #cc0000;
    --secondary: #000000;
    --bg-main: #000000;
    --text-main: #ffffff;
    --border: #ffffff;
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast * {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.high-contrast .bg-primary,
body.high-contrast .bg-secondary,
body.high-contrast button,
body.high-contrast .bg-white,
body.high-contrast .bg-surface-light,
body.high-contrast .dark\:bg-surface-dark {
    background-color: #000 !important;
    border: 2px solid #fff !important;
}

body.high-contrast a,
body.high-contrast button {
    text-decoration: underline !important;
    font-weight: bold !important;
    color: #ffff00 !important;
}

body.high-contrast img {
    filter: grayscale(100%) contrast(120%) !important;
}

body.large-text {
    --scale-factor: 1.25;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body.reduced-motion * {
    transition: none !important;
    animation: none !important;
}

html {
    scroll-behavior: smooth;
    font-size: calc(var(--base-size) * var(--scale-factor));
}

/* Flash Messages Animation */
.flash-messages {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1000;
    pointer-events: none;
}

.alert {
    pointer-events: auto;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}