/* =========================
   ACCESSIBILITY TOKENS
========================= */

:root {
    --a11y-text-scale: 1;
    --a11y-line-height: 1.5;
    --a11y-letter-spacing: normal;
    --a11y-focus-ring: #2563eb;
}

/* =========================
   FONT SCALE
========================= */

body.a11y-font-normal {
    --a11y-text-scale: 1;
}

body.a11y-font-large {
    --a11y-text-scale: 1.08;
}

body.a11y-font-xlarge {
    --a11y-text-scale: 1.16;
}

body.a11y-font-normal,
body.a11y-font-large,
body.a11y-font-xlarge {
    font-size: calc(16px * var(--a11y-text-scale));
    line-height: var(--a11y-line-height);
}

body.a11y-font-normal h1,
body.a11y-font-large h1,
body.a11y-font-xlarge h1,
body.a11y-font-normal h2,
body.a11y-font-large h2,
body.a11y-font-xlarge h2,
body.a11y-font-normal h3,
body.a11y-font-large h3,
body.a11y-font-xlarge h3,
body.a11y-font-normal h4,
body.a11y-font-large h4,
body.a11y-font-xlarge h4,
body.a11y-font-normal p,
body.a11y-font-large p,
body.a11y-font-xlarge p,
body.a11y-font-normal a,
body.a11y-font-large a,
body.a11y-font-xlarge a,
body.a11y-font-normal label,
body.a11y-font-large label,
body.a11y-font-xlarge label,
body.a11y-font-normal button,
body.a11y-font-large button,
body.a11y-font-xlarge button,
body.a11y-font-normal input,
body.a11y-font-large input,
body.a11y-font-xlarge input,
body.a11y-font-normal select,
body.a11y-font-large select,
body.a11y-font-xlarge select,
body.a11y-font-normal textarea,
body.a11y-font-large textarea,
body.a11y-font-xlarge textarea,
body.a11y-font-normal li,
body.a11y-font-large li,
body.a11y-font-xlarge li,
body.a11y-font-normal span,
body.a11y-font-large span,
body.a11y-font-xlarge span {
    font-size: inherit;
}

/* =========================
   UNDERLINE LINKS
========================= */

body.a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* =========================
   ENHANCED FOCUS
========================= */

body.a11y-enhanced-focus a:focus,
body.a11y-enhanced-focus button:focus,
body.a11y-enhanced-focus input:focus,
body.a11y-enhanced-focus select:focus,
body.a11y-enhanced-focus textarea:focus,
body.a11y-enhanced-focus [tabindex]:focus {
    outline: 3px solid var(--a11y-focus-ring) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

/* =========================
   REDUCED MOTION
========================= */

body.a11y-reduced-motion *,
body.a11y-reduced-motion *::before,
body.a11y-reduced-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* =========================
   CONTRAST MODES
========================= */

/* Default */
body.a11y-contrast-default {
    filter: none;
}

/* Grayscale */
body.a11y-contrast-grayscale {
    filter: grayscale(100%);
}

/* High contrast */
body.a11y-contrast-high {
    background: #000 !important;
    color: #fff !important;
}

body.a11y-contrast-high .auth-card,
body.a11y-contrast-high .premium-login-input,
body.a11y-contrast-high .modal-content,
body.a11y-contrast-high .list-group-item,
body.a11y-contrast-high .auth-brand-point {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high h1,
body.a11y-contrast-high h2,
body.a11y-contrast-high h3,
body.a11y-contrast-high h4,
body.a11y-contrast-high h5,
body.a11y-contrast-high h6,
body.a11y-contrast-high label,
body.a11y-contrast-high p,
body.a11y-contrast-high li,
body.a11y-contrast-high span {
    color: #fff !important;
}

body.a11y-contrast-high .btn,
body.a11y-contrast-high button {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* Negative */
body.a11y-contrast-negative {
    background: #000 !important;
    color: #ffd54f !important;
}

body.a11y-contrast-negative .auth-card,
body.a11y-contrast-negative .premium-login-input,
body.a11y-contrast-negative .modal-content,
body.a11y-contrast-negative .list-group-item,
body.a11y-contrast-negative .auth-brand-point {
    background: #000 !important;
    color: #ffd54f !important;
    border-color: #ffd54f !important;
}

body.a11y-contrast-negative a,
body.a11y-contrast-negative h1,
body.a11y-contrast-negative h2,
body.a11y-contrast-negative h3,
body.a11y-contrast-negative h4,
body.a11y-contrast-negative h5,
body.a11y-contrast-negative h6,
body.a11y-contrast-negative label,
body.a11y-contrast-negative p,
body.a11y-contrast-negative li,
body.a11y-contrast-negative span {
    color: #ffd54f !important;
}

body.a11y-contrast-negative .btn,
body.a11y-contrast-negative button {
    background: #000 !important;
    color: #ffd54f !important;
    border-color: #ffd54f !important;
}

/* Light background */
body.a11y-contrast-light {
    background: #fff !important;
    color: #111827 !important;
}

body.a11y-contrast-light .auth-card,
body.a11y-contrast-light .premium-login-input,
body.a11y-contrast-light .modal-content,
body.a11y-contrast-light .list-group-item,
body.a11y-contrast-light .auth-brand-point {
    background: #fff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

body.a11y-contrast-light a,
body.a11y-contrast-light h1,
body.a11y-contrast-light h2,
body.a11y-contrast-light h3,
body.a11y-contrast-light h4,
body.a11y-contrast-light h5,
body.a11y-contrast-light h6,
body.a11y-contrast-light label,
body.a11y-contrast-light p,
body.a11y-contrast-light li,
body.a11y-contrast-light span {
    color: #111827 !important;
}

/* =========================
   ACTIVE STATES IN PANEL
========================= */

.accessibility-widget .list-group-item span.is-active {
    background: #f0fdf4;
}

.accessibility-widget .list-group-item span.is-active p {
    color: #166534;
}

.accessibility-widget .list-group-item span.is-active i {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #86efac;
    color: #166534;
}
