/* The admin in the books' own colours.
 *
 * The same palette the activities use on online.vinte.sk, so the two halves of
 * Vinte online look like one thing:
 *
 *   #459bba  grade 2          mid blue
 *   #03476a  grade 3 part 1   dark navy
 *   #f0e2c7  grade 3 part 2   cream   (on #6b5836 brown)
 *   #e8943a  fun              orange
 *   #fbf7f0  page             warm white, not grey
 *   #33373f  text             #e94560  accent  #ece4d6  hairline
 *
 * Done entirely through Django's own theme variables rather than by
 * overriding its rules: the admin already draws everything from these, so a
 * page or a widget we have not thought about still comes out in the palette,
 * and a Django upgrade cannot leave half the interface behind.
 *
 * Both themes are defined. The admin ships a light/dark toggle and also
 * follows the operating system, so changing only the light one would leave
 * anyone on dark looking at stock Django.
 */

html[data-theme="light"],
:root {
    --primary: #03476a;              /* grade 3 part 1 — the darkest book */
    --secondary: #03476a;
    --accent: #e8943a;               /* fun — the one warm note */
    --primary-fg: #ffffff;

    --body-fg: #33373f;
    --body-bg: #fbf7f0;              /* warm white: the reason it stopped
                                        looking grey */
    --body-quiet-color: #7b7468;
    --body-medium-color: #5c564d;
    --body-loud-color: #1e2a33;

    --header-color: #f0e2c7;         /* grade 3 part 2, on the navy */
    --header-branding-color: #f0e2c7;
    --header-bg: #03476a;
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #e8d5b0;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #14607f;       /* between the navy and grade 2's blue */

    --link-fg: #4a84a9;
    --link-hover-color: #e94560;
    --link-selected-fg: #03476a;

    --hairline-color: #e8ded0;
    --border-color: #ddd0bd;

    --error-fg: #c0392b;
    --message-success-bg: #dff0e4;
    --message-warning-bg: #fbeed9;
    --message-error-bg: #f7dedb;

    --darkened-bg: #f3ece1;          /* a shade down from the page */
    --selected-bg: #efe4d2;
    --selected-row: #f9edd4;         /* cream, so a picked row reads warm */

    --button-bg: #459bba;            /* grade 2 */
    --button-hover-bg: #03476a;
    --default-button-bg: #03476a;
    --default-button-hover-bg: #14607f;
    --close-button-bg: #8d8577;
    --close-button-hover-bg: #6f6859;
    --delete-button-bg: #c0392b;
    --delete-button-hover-bg: #a5312512;

    --object-tools-bg: #e8943a;      /* fun — the action buttons */
    --object-tools-hover-bg: #d07f27;
}

html[data-theme="dark"] {
    --primary: #459bba;              /* the lighter book leads in the dark */
    --secondary: #459bba;
    --accent: #e8943a;
    --primary-fg: #12171c;

    --body-fg: #e7ddcd;
    --body-bg: #14191e;
    --body-quiet-color: #9a9185;
    --body-medium-color: #bdb3a4;
    --body-loud-color: #f5ece0;

    --header-color: #f0e2c7;
    --header-branding-color: #f0e2c7;
    --header-bg: #03293f;
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #e8d5b0;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #062f45;

    --link-fg: #7cc0da;
    --link-hover-color: #f2748a;
    --link-selected-fg: #a8d8e8;

    --hairline-color: #2b323a;
    --border-color: #39424c;

    --error-fg: #e87a6d;
    --message-success-bg: #1d3327;
    --message-warning-bg: #3a2f1b;
    --message-error-bg: #3a211f;

    --darkened-bg: #1b2127;
    --selected-bg: #262d35;
    --selected-row: #33301f;

    --button-bg: #459bba;
    --button-hover-bg: #6bb4cd;
    --default-button-bg: #14607f;
    --default-button-hover-bg: #1d7ba3;
    --close-button-bg: #4a5058;
    --close-button-hover-bg: #5d646d;
    --delete-button-bg: #a5312512;
    --delete-button-hover-bg: #c0392b;

    --object-tools-bg: #d07f27;
    --object-tools-hover-bg: #e8943a;
}

@media (prefers-color-scheme: dark) {
    /* Only when the reader has not chosen for themselves — the toggle writes
       data-theme, and that must win over the operating system. */
    :root:not([data-theme="light"]) {
        --primary: #459bba;
        --secondary: #459bba;
        --accent: #e8943a;
        --primary-fg: #12171c;

        --body-fg: #e7ddcd;
        --body-bg: #14191e;
        --body-quiet-color: #9a9185;
        --body-medium-color: #bdb3a4;
        --body-loud-color: #f5ece0;

        --header-color: #f0e2c7;
        --header-branding-color: #f0e2c7;
        --header-bg: #03293f;
        --header-link-color: #ffffff;

        --breadcrumbs-fg: #e8d5b0;
        --breadcrumbs-link-fg: #ffffff;
        --breadcrumbs-bg: #062f45;

        --link-fg: #7cc0da;
        --link-hover-color: #f2748a;
        --link-selected-fg: #a8d8e8;

        --hairline-color: #2b323a;
        --border-color: #39424c;

        --darkened-bg: #1b2127;
        --selected-bg: #262d35;
        --selected-row: #33301f;

        --button-bg: #459bba;
        --button-hover-bg: #6bb4cd;
        --default-button-bg: #14607f;
        --default-button-hover-bg: #1d7ba3;

        --object-tools-bg: #d07f27;
        --object-tools-hover-bg: #e8943a;
    }
}

/* The one place variables are not enough: the module headers are the books'
   blue rather than a flat grey, which is what makes a long changelist read as
   sections instead of one grey slab. */
.module caption,
.inline-group h2 {
    background: var(--secondary);
    color: var(--header-color);
}

/* The totals bar and its charts (orders, protocols, invoices) sit on the page
   rather than in a white card, so they read as a summary and not as data. */
.vinte-totals {
    background: var(--darkened-bg);
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
}