/*
 * Theme tokens for light/dark mode.
 *
 * Light values match the literals they replaced across the site CSS, so light
 * mode renders identically to the pre-token era. Dark values are the only
 * thing to touch when tuning dark mode.
 *
 * The dark blocks are @media screen so that printing a page while in dark
 * mode falls back to the light tokens (plus the print guard below, which
 * resets Bootstrap's own dark variables).
 */

:root {
    /* Surfaces */
    --pn-surface-page: whitesmoke;      /* page-level gray areas: sidebars, action panels, pre/code */
    --pn-surface-box: #F5F5F5;          /* statement-kind atom boxes (raised on white in light) */
    --pn-definition-box-bg: #fffff6;    /* definition-kind atom boxes */

    /* Tinted selection / hover backgrounds */
    --pn-highlight-bg: #d7ecff;
    --pn-highlight-blue-faint-bg: aliceblue;
    --pn-highlight-yellow-bg: #fdf5da;
    --pn-highlight-yellow-faint-bg: #fffff6;
    --pn-highlight-teal-bg: #e2f1f1;
    --pn-highlight-red-bg: #fbeeee;
    --pn-highlight-gray-bg: #ebebeb;

    /* Accents */
    --pn-accent: rgb(165, 0, 0);        /* maroon: atom names/titles, section headings */
    --pn-accent-strong: rgb(190, 0, 0); /* selection underlines */
    --pn-teal: teal;
    --pn-darkcyan: darkcyan;

    /* Muted text */
    --pn-text-muted: gray;
    --pn-text-muted-strong: dimgray;    /* darker than muted in light, brighter in dark: closer to body text */
    --pn-text-faint: darkgray;          /* hidden/disabled content */

    /* Borders, three tiers */
    --pn-border-subtle: #eee;
    --pn-border: #ddd;
    --pn-border-strong: gray;

    /* Components */
    --pn-modal-header-bg: lightslategrey;
    --pn-btn-subtle-bg: rgba(209, 213, 218, 0.5);
    --pn-box-border-color: transparent; /* atom content boxes: shadow does the work in light */

    /* Shadows */
    --pn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.10);
    --pn-shadow-md: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --pn-shadow-lg: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media screen {
    [data-bs-theme="dark"] {
        /* Surfaces: page recedes below the #212529 body so cards still read as raised */
        --pn-surface-page: #1a1d20;
        --pn-surface-box: #2b3035;
        --pn-definition-box-bg: #2a3240; /* slate blue: raised, cool, distinct from statement gray */

        /* Tinted backgrounds: same hue, dark-surface lightness */
        --pn-highlight-bg: #1f4059;
        --pn-highlight-blue-faint-bg: #1d2937;
        --pn-highlight-yellow-bg: #3e3823;
        --pn-highlight-yellow-faint-bg: #2b2a22;
        --pn-highlight-teal-bg: #1e3535;
        --pn-highlight-red-bg: #3a2527;
        --pn-highlight-gray-bg: #343a40;

        /* Accents brightened for contrast on dark surfaces */
        --pn-accent: #e57373;
        --pn-accent-strong: #ef8383;
        --pn-teal: #4db6ac;
        --pn-darkcyan: #4db6ac;

        --pn-text-muted: #9ba3ab;
        --pn-text-muted-strong: #adb5bd;
        --pn-text-faint: #7a828a;

        --pn-border-subtle: #343a40;
        --pn-border: #495057;
        --pn-border-strong: #6c757d;

        --pn-modal-header-bg: #3e4a56;
        --pn-btn-subtle-bg: rgba(108, 117, 125, 0.35);
        --pn-box-border-color: #3a4147;

        /* Shadows barely register on dark; go stronger and let box borders help */
        --pn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 1px 5px 0 rgba(0, 0, 0, 0.35);
        --pn-shadow-md: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 2px 10px 0 rgba(0, 0, 0, 0.4);
        --pn-shadow-lg: 0 8px 17px 0 rgba(0, 0, 0, 0.55), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    }
}

/* Dark-only adjustments for rules whose light values stay literal in the
   per-page stylesheets (kept there so light mode is untouched). */
@media screen {
    /* The bg-dark navbar blends into the dark body; draw a separating line */
    [data-bs-theme="dark"] .navbar.fixed-top {
        border-bottom: 1px solid var(--pn-border);
    }

    /* Gradebook thead uses .table-light markup; restyle it via table vars */
    [data-bs-theme="dark"] .table-light {
        --bs-table-bg: var(--bs-secondary-bg);
        --bs-table-color: var(--bs-body-color);
        --bs-table-border-color: var(--bs-border-color);
    }

    /* Question boxes are shadow-only in light; on dark add an inset outline
       (not border: that would shift layout) and a stronger shadow */
    [data-bs-theme="dark"] .atom-question-kind {
        outline: 1px solid var(--pn-box-border-color);
        outline-offset: -1px;
        box-shadow: var(--pn-shadow-md);
    }

    /* Near-black glyphs that sit on knocked-out light circles in light mode */
    [data-bs-theme="dark"] .icon-channel-user,
    [data-bs-theme="dark"] .icon-channel-lock-personal {
        color: var(--pn-teal);
    }

    /* Callout-atom icons: deep saturated light-mode colors lift to brighter
       same-hue variants on dark, matching the accent/teal dark weights */
    [data-bs-theme="dark"] .important-icon {
        color: var(--pn-accent);
    }

    [data-bs-theme="dark"] .psp-icon {
        color: #81c784;
    }

    [data-bs-theme="dark"] .guidingquestion-icon {
        color: #9575cd;
    }

    [data-bs-theme="dark"] .idea-icon,
    [data-bs-theme="dark"] .greatidea-icon {
        color: #ffd54f;
    }

    [data-bs-theme="dark"] .goal-icon {
        color: #64b5f6;
    }

    /* btn-light is theme-fixed in Bootstrap (stays near-white on dark); remap
       it to a subtle raised dark surface. Buttons keep their own text-color
       utility classes (teal bot buttons, dimgray toolbar icons, ...). */
    [data-bs-theme="dark"] .btn-light {
        --bs-btn-color: var(--bs-body-color);
        --bs-btn-bg: var(--bs-tertiary-bg);
        --bs-btn-border-color: var(--bs-tertiary-bg);
        --bs-btn-hover-color: var(--bs-body-color);
        --bs-btn-hover-bg: var(--bs-secondary-bg);
        --bs-btn-hover-border-color: var(--bs-secondary-bg);
        --bs-btn-active-color: var(--bs-body-color);
        --bs-btn-active-bg: var(--bs-secondary-bg);
        --bs-btn-active-border-color: var(--bs-secondary-bg);
        --bs-btn-disabled-color: var(--pn-text-muted);
        --bs-btn-disabled-bg: var(--bs-tertiary-bg);
        --bs-btn-disabled-border-color: var(--bs-tertiary-bg);
    }

    /* btn-outline-light (ghost button, e.g. New Post under chapter blocks)
       hover-fills near-white in stock Bootstrap; fill with a subtle dark
       wash instead. */
    [data-bs-theme="dark"] .btn-outline-light {
        --bs-btn-color: var(--bs-body-color);
        --bs-btn-border-color: var(--pn-border);
        --bs-btn-hover-color: var(--bs-body-color);
        --bs-btn-hover-bg: var(--bs-secondary-bg);
        --bs-btn-hover-border-color: var(--bs-secondary-bg);
        --bs-btn-active-color: var(--bs-body-color);
        --bs-btn-active-bg: var(--bs-secondary-bg);
        --bs-btn-active-border-color: var(--bs-secondary-bg);
    }

    /* btn-outline-primary keeps Bootstrap's fixed #0d6efd on dark while links
       brighten to #6ea8fe; align it with the link blue. The lighter fill on
       hover/active needs dark text (same pattern as Bootstrap's outline-info). */
    [data-bs-theme="dark"] .btn-outline-primary {
        --bs-btn-color: var(--bs-link-color);
        --bs-btn-border-color: var(--bs-link-color);
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: var(--bs-link-color);
        --bs-btn-hover-border-color: var(--bs-link-color);
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: var(--bs-link-color);
        --bs-btn-active-border-color: var(--bs-link-color);
        --bs-btn-focus-shadow-rgb: 110, 168, 254;
        --bs-btn-disabled-color: var(--bs-link-color);
        --bs-btn-disabled-border-color: var(--bs-link-color);
    }

    /* Gray outline buttons (New Post, Cancel, ...) are near-invisible on
       dark; lift text to body color and the border a step brighter. Hover
       and active states keep Bootstrap's stock gray fill. */
    [data-bs-theme="dark"] .btn-outline-secondary {
        --bs-btn-color: var(--bs-body-color);
        --bs-btn-border-color: var(--pn-text-muted);
    }

    /* Comment cards: light mode fades read items by dropping text contrast
       (white unread vs gray read). Contrast inverts on dark: unread stays
       ink-dark so text is crispest, read washes slightly lighter. */
    [data-bs-theme="dark"] .comment-compact-col.background-gray {
        background-color: var(--pn-surface-box); /* read */
    }

    [data-bs-theme="dark"] .comment-compact-col .icon-channel-lock,
    [data-bs-theme="dark"] .comment-compact-col .icon-channel-file {
        background-color: var(--pn-surface-box);
        outline-color: var(--pn-surface-box);
    }

    [data-bs-theme="dark"] .comment-compact-col-unviewed {
        background-color: var(--pn-surface-page); /* unread */
    }

    [data-bs-theme="dark"] .comment-compact-col-unviewed .icon-channel-lock,
    [data-bs-theme="dark"] .comment-compact-col-unviewed .icon-channel-file {
        background-color: var(--pn-surface-page);
        outline-color: var(--pn-surface-page);
    }

    /* Footnote-marker blue is too dim for small text on dark */
    [data-bs-theme="dark"] .popover-trigger-footnote {
        color: var(--bs-link-color);
    }
}

/* Theme-conditional visibility, for content with baked-in colors (e.g. UI
   screenshots). Mark the pair with .light-theme-only / .dark-theme-only;
   print always falls back to the light variant. */
@media screen {
    [data-bs-theme="dark"] .light-theme-only {
        display: none !important;
    }
}

:root:not([data-bs-theme="dark"]) .dark-theme-only {
    display: none !important;
}

@media print {
    .dark-theme-only {
        display: none !important;
    }
}

/* Printing while in dark mode must come out light: reset Bootstrap's own dark
   variables (the --pn-* dark overrides are already screen-only above). */
@media print {
    [data-bs-theme="dark"] {
        color-scheme: light;
        --bs-body-color: #212529;
        --bs-body-color-rgb: 33, 37, 41;
        --bs-body-bg: #fff;
        --bs-body-bg-rgb: 255, 255, 255;
        --bs-emphasis-color: #000;
        --bs-emphasis-color-rgb: 0, 0, 0;
        --bs-secondary-color: rgba(33, 37, 41, 0.75);
        --bs-secondary-bg: #e9ecef;
        --bs-tertiary-color: rgba(33, 37, 41, 0.5);
        --bs-tertiary-bg: #f8f9fa;
        --bs-border-color: #dee2e6;
        --bs-heading-color: inherit;
        --bs-link-color: #0d6efd;
        --bs-link-hover-color: #0a58ca;
        --bs-link-color-rgb: 13, 110, 253;
        --bs-link-hover-color-rgb: 10, 88, 202;
        --bs-code-color: #d63384;
    }
}