/* ============================================================
   DOOKUN.COM
   Accessibility and user preference overrides
   ============================================================ */


/* ------------------------------------------------------------
   DARK MODE
   ------------------------------------------------------------ */

html[data-theme="dark"] {
    --bg: #08101d;
    --surface: #101b2c;
    --surface-2: #142238;

    --text: #f7f9fd;
    --muted: #aab5c8;
    --line: #27364e;

    --header-bg: rgba(8, 16, 29, .90);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="system"] {
        --bg: #08101d;
        --surface: #101b2c;
        --surface-2: #142238;

        --text: #f7f9fd;
        --muted: #aab5c8;
        --line: #27364e;

        --header-bg: rgba(8, 16, 29, .90);
    }
}


/* ------------------------------------------------------------
   HIGH CONTRAST
   ------------------------------------------------------------ */

html[data-contrast="high"] {
    --bg: #fff;
    --surface: #fff;

    --text: #000;
    --muted: #222;
    --line: #000;

    --blue: #003cff;
}

html[data-theme="dark"][data-contrast="high"] {
    --bg: #000;
    --surface: #000;

    --text: #fff;
    --muted: #fff;
    --line: #fff;

    --blue: #78a5ff;
}


/* ------------------------------------------------------------
   READING OPTIONS
   ------------------------------------------------------------ */

html[data-font="readable"] body {
    font-family:
        Verdana,
        Arial,
        sans-serif;

    letter-spacing: .015em;
    word-spacing: .06em;
}

html[data-links="emphasised"] main a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .22em !important;
}


/* ------------------------------------------------------------
   SIMPLIFIED VIEW
   ------------------------------------------------------------ */

html[data-simplify="on"] .hero-glow,
html[data-simplify="on"] .handwritten-note {
    display: none;
}

html[data-simplify="on"] * {
    box-shadow: none !important;
}


/* ------------------------------------------------------------
   ACCESSIBILITY PANEL
   ------------------------------------------------------------ */

.accessibility-panel {
    position: fixed;
    z-index: 500;

    inset: 0 0 0 auto;

    width: min(440px, 100%);

    background: var(--bg);

    border-left: 1px solid var(--line);

    box-shadow:
        -20px 0 80px rgba(0, 0, 0, .14);

    transform: translateX(105%);

    transition: transform .28s ease;
}

.accessibility-panel.open {
    transform: translateX(0);
}

.accessibility-panel-inner {
    height: 100%;

    overflow-y: auto;

    padding: 36px;
}

.accessibility-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 40px;
}

.accessibility-heading h2 {
    margin: 0;

    font-size: 2rem;
}

.panel-close {
    border: 0;

    background: transparent;
    color: inherit;

    cursor: pointer;

    font-size: 2rem;
}

.preference-group {
    padding: 24px 0;

    border-top: 1px solid var(--line);
}

.preference-group h3 {
    margin: 0 0 16px;

    font-size: .9rem;
}

.segmented {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.segmented button {
    padding: 10px 14px;

    border: 1px solid var(--line);
    border-radius: 8px;

    background: var(--surface);
    color: var(--text);

    cursor: pointer;
}

.segmented button.active {
    border-color: var(--blue);

    background: var(--blue);
    color: #fff;
}

.switch-row {
    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.switch-row input {
    width: 22px;
    height: 22px;
}

.reset-preferences {
    width: 100%;

    margin-top: 22px;
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 8px;

    background: var(--surface);
    color: var(--text);

    cursor: pointer;
}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    html[data-motion="system"] *,
    html[data-motion="system"] *::before,
    html[data-motion="system"] *::after {
        scroll-behavior: auto !important;

        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;
    }
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    scroll-behavior: auto !important;

    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: .001ms !important;
}