/*
 * KHOJ chromatic theme
 *
 * This file is intentionally loaded after the legacy and page-level styles.
 * It gives each part of the judge a stable semantic colour while keeping
 * success/verdict colours intact.
 */

html[data-theme="light"] {
    background-color: #f7f8fc !important;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(49, 87, 200, .13), transparent 28rem),
        radial-gradient(circle at 92% 10%, rgba(217, 119, 6, .11), transparent 25rem),
        radial-gradient(circle at 72% 82%, rgba(124, 58, 237, .08), transparent 30rem),
        linear-gradient(180deg, #f8f9fd 0%, #f5f7fc 48%, #f8f6f2 100%) !important;
}

html[data-theme="dark"] {
    background-color: #0d1020 !important;
    background-image:
        radial-gradient(circle at 8% 3%, rgba(80, 115, 219, .19), transparent 30rem),
        radial-gradient(circle at 94% 9%, rgba(217, 119, 6, .11), transparent 27rem),
        radial-gradient(circle at 70% 84%, rgba(132, 83, 218, .12), transparent 32rem),
        linear-gradient(145deg, #0d1020 0%, #111426 52%, #10131f 100%) !important;
}

body[data-theme="light"] {
    --oj-bg: #f7f8fc;
    --oj-bg-soft: #eef2ff;
    --oj-panel: #fffdfa;
    --oj-panel-strong: #ffffff;
    --oj-panel-muted: #f3f5fb;
    --oj-border: rgba(49, 57, 91, .14);
    --oj-border-strong: rgba(49, 57, 91, .22);
    --oj-text: #252a3d;
    --oj-muted: #687084;
    --oj-heading: #171c31;
    --oj-accent: #3157c8;
    --oj-accent-hover: #2747aa;
    --oj-accent-soft: rgba(49, 87, 200, .10);
    --oj-secondary: #7254c7;
    --oj-info: #236fa1;
    --oj-cyan: #147d86;
    --oj-success: #18794e;
    --oj-warning: #bd6608;
    --oj-danger: #bd3f4b;
    --oj-rose: #b83e72;
    --oj-shadow: 0 20px 48px rgba(31, 37, 69, .09);
    --oj-shadow-soft: 0 10px 26px rgba(31, 37, 69, .07);
    --oj-focus: 0 0 0 4px rgba(49, 87, 200, .17);
    background: transparent !important;
}

body[data-theme="dark"] {
    --oj-bg: #0d1020;
    --oj-bg-soft: #11162b;
    --oj-panel: #15182a;
    --oj-panel-strong: #191d31;
    --oj-panel-muted: #1d2137;
    --oj-border: rgba(171, 184, 230, .15);
    --oj-border-strong: rgba(171, 184, 230, .24);
    --oj-text: #e2e6f3;
    --oj-muted: #9aa3bb;
    --oj-heading: #f5f7ff;
    --oj-accent: #6f91ef;
    --oj-accent-hover: #86a4f5;
    --oj-accent-soft: rgba(111, 145, 239, .15);
    --oj-secondary: #ad8df0;
    --oj-info: #6ab6e8;
    --oj-cyan: #50c6c5;
    --oj-success: #57cb91;
    --oj-warning: #f4b454;
    --oj-danger: #f47b83;
    --oj-rose: #ee83ad;
    --oj-shadow: 0 24px 54px rgba(0, 0, 0, .34);
    --oj-shadow-soft: 0 12px 28px rgba(0, 0, 0, .27);
    --oj-focus: 0 0 0 4px rgba(111, 145, 239, .25);
    background: transparent !important;
}

/* Global reading and focus colours. */
body[data-theme] a {
    color: var(--oj-accent);
}

body[data-theme] a:hover {
    color: var(--oj-accent-hover);
}

body[data-theme] ::selection {
    color: var(--oj-heading);
    background: rgba(128, 155, 239, .28);
}

#page-top-loader .bar {
    background: linear-gradient(90deg, #3157c8 0%, #7254c7 34%, #d14f76 66%, #f29b24 100%) !important;
    box-shadow: 0 0 12px rgba(114, 84, 199, .45), 0 0 20px rgba(242, 155, 36, .24) !important;
}

/* Navigation: every destination has its own restrained accent. */
body[data-theme="light"] #nav-container,
body[data-theme="light"] #navigation #nav-container {
    border-color: rgba(56, 64, 102, .15) !important;
    background: rgba(255, 255, 255, .91) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 64, 102, .08), 0 14px 34px rgba(31, 37, 69, .09) !important;
}

body[data-theme="dark"] #nav-container,
body[data-theme="dark"] #navigation #nav-container {
    border-color: rgba(171, 184, 230, .17) !important;
    background: rgba(20, 24, 42, .94) !important;
    box-shadow: inset 0 0 0 1px rgba(171, 184, 230, .08), 0 18px 42px rgba(0, 0, 0, .32) !important;
}

body[data-theme] #nav-list > li > a.nav-home:hover,
body[data-theme] #nav-list > li > a.nav-home.active {
    border-color: rgba(49, 87, 200, .26) !important;
    background: rgba(49, 87, 200, .12) !important;
    color: #3157c8 !important;
}

body[data-theme] #nav-list > li > a[class*="problem"]:hover,
body[data-theme] #nav-list > li > a[class*="problem"].active {
    border-color: rgba(35, 111, 161, .27) !important;
    background: rgba(35, 111, 161, .12) !important;
    color: var(--oj-info) !important;
}

body[data-theme] #nav-list > li > a[class*="submission"]:hover,
body[data-theme] #nav-list > li > a[class*="submission"].active {
    border-color: rgba(114, 84, 199, .28) !important;
    background: rgba(114, 84, 199, .13) !important;
    color: var(--oj-secondary) !important;
}

body[data-theme] #nav-list > li > a[class*="user"]:hover,
body[data-theme] #nav-list > li > a[class*="user"].active {
    border-color: rgba(189, 102, 8, .28) !important;
    background: rgba(217, 119, 6, .12) !important;
    color: var(--oj-warning) !important;
}

body[data-theme] #nav-list > li > a[class*="contest"]:hover,
body[data-theme] #nav-list > li > a[class*="contest"].active {
    border-color: rgba(184, 62, 114, .27) !important;
    background: rgba(184, 62, 114, .12) !important;
    color: var(--oj-rose) !important;
}

body[data-theme] #nav-list > li > a[class*="about"]:hover,
body[data-theme] #nav-list > li > a[class*="about"].active,
body[data-theme] #nav-list > li > a[class*="chat"]:hover,
body[data-theme] #nav-list > li > a[class*="chat"].active {
    border-color: rgba(20, 125, 134, .27) !important;
    background: rgba(20, 125, 134, .12) !important;
    color: var(--oj-cyan) !important;
}

body[data-theme] #nav-list > li > a.nav-status:hover,
body[data-theme] #nav-list > li > a.nav-status.active {
    border-color: rgba(24, 121, 78, .27) !important;
    background: rgba(24, 121, 78, .12) !important;
    color: var(--oj-success) !important;
}

body[data-theme="dark"] #nav-list > li > a.nav-home:hover,
body[data-theme="dark"] #nav-list > li > a.nav-home.active,
body[data-theme="dark"] #nav-list > li > a[class*="problem"]:hover,
body[data-theme="dark"] #nav-list > li > a[class*="problem"].active,
body[data-theme="dark"] #nav-list > li > a[class*="submission"]:hover,
body[data-theme="dark"] #nav-list > li > a[class*="submission"].active,
body[data-theme="dark"] #nav-list > li > a[class*="user"]:hover,
body[data-theme="dark"] #nav-list > li > a[class*="user"].active,
body[data-theme="dark"] #nav-list > li > a[class*="contest"]:hover,
body[data-theme="dark"] #nav-list > li > a[class*="contest"].active,
body[data-theme="dark"] #nav-list > li > a[class*="about"]:hover,
body[data-theme="dark"] #nav-list > li > a[class*="about"].active,
body[data-theme="dark"] #nav-list > li > a[class*="chat"]:hover,
body[data-theme="dark"] #nav-list > li > a[class*="chat"].active,
body[data-theme="dark"] #nav-list > li > a.nav-status:hover,
body[data-theme="dark"] #nav-list > li > a.nav-status.active {
    color: #fff !important;
}

body[data-theme] #user-links > a:nth-of-type(1):hover {
    border-color: rgba(114, 84, 199, .28) !important;
    background: rgba(114, 84, 199, .13) !important;
}

body[data-theme] #user-links .nav-message-link:hover {
    border-color: rgba(35, 111, 161, .28) !important;
    background: rgba(35, 111, 161, .13) !important;
}

body[data-theme] #user-links > a[href*="ticket"]:hover {
    border-color: rgba(217, 119, 6, .30) !important;
    background: rgba(217, 119, 6, .13) !important;
}

/* Announcement is informational, not a success state. */
body[data-theme] .site-global-ticker {
    border-color: rgba(35, 111, 161, .20) !important;
    background:
        linear-gradient(110deg, rgba(35, 111, 161, .08), rgba(114, 84, 199, .05)),
        var(--oj-panel) !important;
}

body[data-theme] .site-global-ticker__badge {
    background: linear-gradient(135deg, #236fa1, #3157c8) !important;
    box-shadow: 0 8px 18px rgba(35, 111, 161, .20) !important;
}

body[data-theme] .site-global-ticker__move a {
    color: var(--oj-info) !important;
}

/* Main actions use blue; green remains reserved for confirmed success. */
body[data-theme] input[type=submit],
body[data-theme] button[type=submit],
body[data-theme] button.submit-bar,
body[data-theme] input.submit-bar,
body[data-theme] a.submit-bar,
body[data-theme] .participate-button,
body[data-theme] input.participate-button,
body[data-theme] .contest-list input[type="submit"].button,
body[data-theme] .global-popup-announcement__button:not(.secondary),
body[data-theme] .auth-mail-button,
body[data-theme] .login-button,
body[data-theme] .button.full,
body[data-theme] #go.button,
body[data-theme] a.button.disable-link {
    border-color: transparent !important;
    background: linear-gradient(135deg, #3b64d8, #294cae) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgba(49, 87, 200, .18) !important;
}

body[data-theme] input[type=submit]:hover,
body[data-theme] button[type=submit]:hover,
body[data-theme] button.submit-bar:hover,
body[data-theme] input.submit-bar:hover,
body[data-theme] a.submit-bar:hover,
body[data-theme] .participate-button:hover,
body[data-theme] .global-popup-announcement__button:not(.secondary):hover,
body[data-theme] .auth-mail-button:hover,
body[data-theme] .login-button:hover,
body[data-theme] .button.full:hover,
body[data-theme] #go.button:hover,
body[data-theme] a.button.disable-link:hover {
    background: linear-gradient(135deg, #3157c8, #213e98) !important;
    box-shadow: 0 12px 25px rgba(49, 87, 200, .25) !important;
}

body[data-theme] #random.button,
body[data-theme] a.button.clarify {
    border-color: rgba(114, 84, 199, .24) !important;
    color: var(--oj-secondary) !important;
    background: rgba(114, 84, 199, .08) !important;
}

body[data-theme] #random.button:hover,
body[data-theme] a.button.clarify:hover {
    background: rgba(114, 84, 199, .14) !important;
}

body[data-theme] a.button.clarify::before {
    background: var(--oj-secondary) !important;
    box-shadow: 0 0 0 3px rgba(114, 84, 199, .12) !important;
}

/* Inputs, tabs and pagination share the same clear interaction language. */
body[data-theme] input:hover,
body[data-theme] textarea:hover,
body[data-theme] select:hover,
body[data-theme] .select2-container--dmoj .select2-selection:hover {
    border-color: rgba(49, 87, 200, .42) !important;
    box-shadow: var(--oj-focus) !important;
}

body[data-theme] .tabs .tab.active a,
body[data-theme] .tabs .tab.active span,
body[data-theme] .tabs > ul > li.active > a,
body[data-theme] .tabs > ul > li.active > span,
body[data-theme] #mobile.tabs .tab.active a,
body[data-theme] #mobile.tabs .tab.active span {
    background: linear-gradient(135deg, #7254c7, #5840a8) !important;
    color: #fff !important;
}

body[data-theme] .tabs .tab a:hover,
body[data-theme] .tabs > ul > li > a:hover,
body[data-theme] #mobile.tabs .tab a:hover {
    background: rgba(114, 84, 199, .10) !important;
}

body[data-theme] ul.pagination > .active-page > a,
body[data-theme] ul.pagination > .active-page > span,
body[data-theme] .pagination > .active-page > a,
body[data-theme] .pagination > .active-page > span {
    background: var(--oj-secondary) !important;
    color: #fff !important;
}

/* Cards and tables get subtle colour cues by content type. */
body[data-theme] .sidebox h3,
body[data-theme] .blog-sidebox.sidebox > h3,
body[data-theme] .widget h2,
body[data-theme] .widget h3,
body[data-theme] .panel h2,
body[data-theme] .panel h3 {
    background:
        linear-gradient(105deg, rgba(49, 87, 200, .09), rgba(114, 84, 199, .05)),
        var(--oj-panel-muted) !important;
}

body[data-theme] .sidebox h3 .fa,
body[data-theme] .blog-sidebox.sidebox > h3 i,
body[data-theme] .widget h2 .fa,
body[data-theme] .widget h3 .fa {
    color: var(--oj-secondary) !important;
}

body[data-theme] .table th,
body[data-theme] #problem-table th,
body[data-theme] #submissions-table th,
body[data-theme] #ranking-table th,
body[data-theme] .users-table th,
body[data-theme] .organization-table th,
body[data-theme] .contest-list thead th {
    background:
        linear-gradient(105deg, rgba(49, 87, 200, .08), rgba(114, 84, 199, .04)),
        var(--oj-panel-muted) !important;
}

body[data-theme] .table tbody tr:hover td {
    background: rgba(49, 87, 200, .075) !important;
}

body[data-theme] #problem-table th {
    border-top-color: rgba(35, 111, 161, .35) !important;
    background: rgba(35, 111, 161, .09) !important;
}

body[data-theme] #problem-table td.problem-name a,
body[data-theme] #problem-table td.problem-code a {
    color: var(--oj-info) !important;
}

body[data-theme] #problem-table tbody tr:hover td {
    background: rgba(35, 111, 161, .08) !important;
}

body[data-theme] #submissions-table th {
    background: rgba(114, 84, 199, .09) !important;
}

body[data-theme] #submissions-table tbody tr:hover td {
    background: rgba(114, 84, 199, .08) !important;
}

body[data-theme] #ranking-table th,
body[data-theme] .users-table th {
    background: rgba(217, 119, 6, .09) !important;
}

body[data-theme] #ranking-table tbody tr:hover td,
body[data-theme] .users-table tbody tr:hover td {
    background: rgba(217, 119, 6, .075) !important;
}

body[data-theme] .contest-list thead th {
    background: rgba(184, 62, 114, .09) !important;
}

body[data-theme] .contest-list-title {
    color: var(--oj-rose) !important;
}

body[data-theme] .contest-list tbody tr:hover td {
    background: rgba(184, 62, 114, .075) !important;
}

body[data-theme] .time-remaining {
    color: var(--oj-warning) !important;
}

/* Semantic feedback stays instantly recognisable. */
body[data-theme] .alert-info,
body[data-theme] .info-box {
    border-color: rgba(35, 111, 161, .28) !important;
    background: rgba(35, 111, 161, .09) !important;
    color: var(--oj-info) !important;
}

body[data-theme] .alert-success,
body[data-theme] .success,
body[data-theme] .case-AC {
    color: var(--oj-success) !important;
}

body[data-theme] .alert-warning,
body[data-theme] .warning {
    color: var(--oj-warning) !important;
}

body[data-theme] .alert-danger,
body[data-theme] .danger,
body[data-theme] .error {
    color: var(--oj-danger) !important;
}

body[data-theme] footer {
    border-top-color: rgba(114, 84, 199, .16) !important;
    background:
        linear-gradient(100deg, rgba(49, 87, 200, .05), rgba(114, 84, 199, .06), rgba(217, 119, 6, .04)),
        var(--oj-panel) !important;
}

/* Popup levels use the same semantic palette. */
body[data-theme] .global-popup-announcement__accent {
    background: linear-gradient(90deg, #236fa1, #7254c7) !important;
}

body[data-theme] .global-popup-announcement--warning .global-popup-announcement__accent {
    background: linear-gradient(90deg, #d97706, #f5b82e) !important;
}

body[data-theme] .global-popup-announcement--danger .global-popup-announcement__accent {
    background: linear-gradient(90deg, #b92f3d, #ee6571) !important;
}

body[data-theme] .global-popup-announcement--success .global-popup-announcement__accent {
    background: linear-gradient(90deg, #18794e, #42b883) !important;
}

body[data-theme] .global-popup-announcement__icon {
    color: var(--oj-secondary) !important;
    background: rgba(114, 84, 199, .11) !important;
}

/* Mobile navigation keeps the palette instead of falling back to legacy green. */
@media (max-width: 900px) {
    body[data-theme="light"] #nav-container {
        background: rgba(255, 255, 255, .94) !important;
        border-color: rgba(56, 64, 102, .15) !important;
        box-shadow: 0 12px 28px rgba(31, 37, 69, .11), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    }

    body[data-theme="dark"] #nav-container {
        background: rgba(20, 24, 42, .95) !important;
        border-color: rgba(171, 184, 230, .17) !important;
    }

    body[data-theme="light"] #navicon {
        color: #3157c8 !important;
        background: #f1f4ff !important;
        box-shadow: inset 0 0 0 1px rgba(49, 87, 200, .18), 0 8px 18px rgba(49, 87, 200, .10) !important;
    }

    body[data-theme="dark"] #navicon {
        color: #a9beff !important;
        background: #202641 !important;
        box-shadow: inset 0 0 0 1px rgba(126, 158, 244, .18), 0 10px 20px rgba(0, 0, 0, .25) !important;
    }

    body[data-theme] #mobile-side-menu {
        background: linear-gradient(165deg, rgba(49, 87, 200, .96), rgba(83, 54, 154, .96)) !important;
        border-right-color: rgba(255, 255, 255, .16) !important;
        box-shadow: 18px 0 42px rgba(32, 25, 76, .28) !important;
    }

    body[data-theme] #mobile-side-menu > ul > li > a,
    body[data-theme] #mobile-side-menu > ul > li > .mobile-parent {
        color: #fff !important;
        background: rgba(255, 255, 255, .09) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
    }

    body[data-theme] #mobile-side-menu a:hover,
    body[data-theme] #mobile-side-menu .mobile-parent:hover {
        background: rgba(255, 255, 255, .17) !important;
    }
}

/*
 * Typography refinement
 * Keep hierarchy through size and colour instead of making every label bold.
 */
body[data-theme] {
    font-weight: 400 !important;
}

body[data-theme] a {
    font-weight: 500;
}

body[data-theme] strong,
body[data-theme] b {
    font-weight: 600;
}

body[data-theme] h1 {
    font-weight: 650 !important;
}

body[data-theme] h2 {
    font-weight: 620 !important;
}

body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6 {
    font-weight: 600 !important;
}

body[data-theme] .title,
body[data-theme] .title a,
body[data-theme] [class$="-title"],
body[data-theme] [class$="-title"] a,
body[data-theme] [class*="__title"],
body[data-theme] [class*="__title"] a {
    font-weight: 620 !important;
}

body[data-theme] label,
body[data-theme] legend,
body[data-theme] .form-label,
body[data-theme] [class$="-label"],
body[data-theme] [class*="__label"] {
    font-weight: 550 !important;
}

body[data-theme] #navigation ul li a,
body[data-theme] #navigation ul li button,
body[data-theme] #user-links > a,
body[data-theme] #user-links .anon a,
body[data-theme] #user-links b {
    font-weight: 580 !important;
}

body[data-theme] .button,
body[data-theme] a.button,
body[data-theme] .inline-button,
body[data-theme] .small-button,
body[data-theme] button,
body[data-theme] input[type=button],
body[data-theme] input[type=submit],
body[data-theme] .btn-top-bar,
body[data-theme] .participate-button,
body[data-theme] .global-popup-announcement__button,
body[data-theme] .auth-mail-button,
body[data-theme] .login-button,
body[data-theme] .journey-cta {
    font-weight: 600 !important;
}

body[data-theme] .tabs .tab a,
body[data-theme] .tabs .tab span,
body[data-theme] .tabs > ul > li > a,
body[data-theme] .tabs > ul > li > span,
body[data-theme] #mobile.tabs .tab a,
body[data-theme] #mobile.tabs .tab span {
    font-weight: 580 !important;
}

body[data-theme] .sidebox h3,
body[data-theme] .blog-sidebox.sidebox > h3,
body[data-theme] .widget h2,
body[data-theme] .widget h3,
body[data-theme] .panel h2,
body[data-theme] .panel h3 {
    font-weight: 620 !important;
}

body[data-theme] .table th,
body[data-theme] #problem-table th,
body[data-theme] #submissions-table th,
body[data-theme] #ranking-table th,
body[data-theme] .users-table th,
body[data-theme] .organization-table th,
body[data-theme] .contest-list thead th {
    font-weight: 620 !important;
}

body[data-theme] #problem-table td.problem-code a,
body[data-theme] #problem-table td.problem-name a,
body[data-theme] .contest-list-title,
body[data-theme] .users-table td.user-name a,
body[data-theme] .post-authors a,
body[data-theme] .time-remaining {
    font-weight: 600 !important;
}

body[data-theme] [class*="rate-"],
body[data-theme] [class*="rate-"] a,
body[data-theme] .staff,
body[data-theme] .staff a,
body[data-theme] .admin,
body[data-theme] .admin a,
body[data-theme] .teacher,
body[data-theme] .teacher a,
body[data-theme] .daor,
body[data-theme] .daor a {
    font-weight: 600 !important;
}

body[data-theme] .badge,
body[data-theme] .contest-tag,
body[data-theme] .tag-chip,
body[data-theme] .type-tag,
body[data-theme] .site-global-ticker__badge,
body[data-theme] .journey-eyebrow,
body[data-theme] .journey-day-label,
body[data-theme] .journey-streak-value span,
body[data-theme] .journey-level-copy strong,
body[data-theme] .journey-quest-title,
body[data-theme] .journey-login-link {
    font-weight: 600 !important;
}

body[data-theme] .journey-streak-value strong,
body[data-theme] .journey-level-badge {
    font-weight: 700 !important;
}

body[data-theme] .site-global-ticker__move a,
body[data-theme] .site-global-ticker__move span {
    font-weight: 550 !important;
}

body[data-theme] .global-popup-announcement h2 {
    font-weight: 640 !important;
}

/* Blog/news titles use the requested berry pink instead of success green. */
body[data-theme] #blog-container section.post h2.title,
body[data-theme] #blog-container section.post h2.title a,
body[data-theme] .blog-entry .title,
body[data-theme] .blog-entry .title a,
body[data-theme] .magazine-card-title,
body[data-theme] .magazine-card-title a {
    color: #c2386c !important;
    font-weight: 600 !important;
}

body[data-theme] #blog-container section.post h2.title a:hover,
body[data-theme] .blog-entry .title a:hover,
body[data-theme] .magazine-card-title a:hover {
    color: #a82d5b !important;
}

body[data-theme="dark"] #blog-container section.post h2.title,
body[data-theme="dark"] #blog-container section.post h2.title a,
body[data-theme="dark"] .blog-entry .title,
body[data-theme="dark"] .blog-entry .title a,
body[data-theme="dark"] .magazine-card-title,
body[data-theme="dark"] .magazine-card-title a {
    color: #f17cab !important;
}

body[data-theme="dark"] #blog-container section.post h2.title a:hover,
body[data-theme="dark"] .blog-entry .title a:hover,
body[data-theme="dark"] .magazine-card-title a:hover {
    color: #ff9bc2 !important;
}