/*
    Course themes: the colours of each course (PROJECT.md §4 "Course types"). A course names its
    theme in course.json ("theme": "rose"); the page sets <html data-course-theme="rose"> (theme.js),
    and the blocks below do the rest. Two settings combine:
      - the course's theme, chosen by the author: these colours;
      - the reading mode, chosen by the learner: <html data-theme="light|sepia|dark|auto">, where
        "auto" (or none) follows the device's dark mode.
    So every theme defines its colours for each reading mode.

    rose is also the default: its blocks have no data-course-theme, so they apply to every page (the
    course list, the login page) and to a course without a theme, or with one this file doesn't know.

    Adding a theme, e.g. "ocean": copy rose's four blocks below it and qualify each with
    [data-course-theme="ocean"]:
        :root[data-course-theme="ocean"] { …every colour… }
        :root[data-course-theme="ocean"][data-theme="sepia"] { … }
        :root[data-course-theme="ocean"][data-theme="dark"] { … }
        @media (prefers-color-scheme: dark) {
            :root[data-course-theme="ocean"]:not([data-theme]), :root[data-course-theme="ocean"][data-theme="auto"] { … }
        }
    The light block must set every variable rose's light block sets: it's the base under the other
    modes, and it wins over rose's sepia and dark blocks (same specificity, later in the file). The
    mode blocks then need only what differs, and win over the light block (one attribute more).
    Check the contrast of text, --muted and --accent in every mode.
*/

/* ---------- rose: the default. Colours follow the book's PDFs: rose highlights, deep red numbers. ---------- */

:root {
    --bg: #fdfcfb;
    --surface: #ffffff;
    --text: #23201f;
    --muted: #77706d;
    --border: #e7e0dd;
    --accent: #b4475a;          /* the PDFs' red numbers and Hungarian words */
    --accent-text: #ffffff;
    --hl: #f3dada;              /* the PDFs' highlight behind vocabulary words */
    --hl-strong: #e9b9bd;
    --hu-hl: #f3dada80;
    --shadow: 0 8px 28px rgb(40 20 20 / 0.16), 0 1px 3px rgb(40 20 20 / 0.12);
    --image-border: #d9cfcb;    /* quiz pictures: a shade darker than --border */
    --image-filter: none;
    --theme-color: #b4475a;     /* the browser's own bar (<meta name="theme-color">, set by theme.js) */

    color-scheme: light;
}

:root[data-theme="sepia"] {
    --bg: #f6efe2;
    --surface: #fbf6ec;
    --text: #3a2e22;
    --muted: #84735f;
    --border: #e4d8c3;
    --hl: #efd3c4;
    --hl-strong: #e3b3a0;
    --hu-hl: #efd3c480;
    --image-border: #d6c5a8;
}

/* Dark: chosen explicitly, or "auto" (no data-theme) on a device set to dark mode. */
:root[data-theme="dark"] {
    --bg: #171415;
    --surface: #221e1f;
    --text: #ece6e3;
    --muted: #a39996;
    --border: #3a3334;
    --accent: #e27a8b;
    --accent-text: #1b1213;
    --hl: #4a2c31;
    --hl-strong: #7a3e48;
    --hu-hl: #4a2c3199;
    --shadow: 0 8px 28px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
    --image-border: #4d4446;
    --image-filter: brightness(0.88);   /* a white picture would glare in the dark */
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]), :root[data-theme="auto"] {
        --bg: #171415;
        --surface: #221e1f;
        --text: #ece6e3;
        --muted: #a39996;
        --border: #3a3334;
        --accent: #e27a8b;
        --accent-text: #1b1213;
        --hl: #4a2c31;
        --hl-strong: #7a3e48;
        --hu-hl: #4a2c3199;
        --shadow: 0 8px 28px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
        --image-border: #4d4446;
        --image-filter: brightness(0.88);
        color-scheme: dark;
    }
}

/* ---------- coral: the video course. Cool greys with the brand's coral red, a navy bar. ---------- */

:root[data-course-theme="coral"] {
    --bg: #f9f9f9;
    --surface: #ffffff;
    --text: #292f33;
    --muted: #697077;
    --border: #e2e5e8;
    --accent: #c0455a;          /* the brand's coral (#d6586a on the old site), darkened to read well as text */
    --accent-text: #ffffff;
    --hl: #f7e1e4;
    --hl-strong: #eebfc6;
    --hu-hl: #f7e1e480;
    --shadow: 0 8px 28px rgb(20 30 45 / 0.14), 0 1px 3px rgb(20 30 45 / 0.10);
    --image-border: #d3d8dd;
    --image-filter: none;
    --theme-color: #1f2a44;     /* the brand's navy */

    color-scheme: light;
}

/* No sepia block: sepia (a reading mode of the book) shows the light colours above. */

:root[data-course-theme="coral"][data-theme="dark"] {
    --bg: #14171b;
    --surface: #1e2227;
    --text: #e7e9ec;
    --muted: #9ba2aa;
    --border: #343a41;
    --accent: #ef7f90;
    --accent-text: #1a1214;
    --hl: #4a2a31;
    --hl-strong: #7a3d48;
    --hu-hl: #4a2a3199;
    --shadow: 0 8px 28px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
    --image-border: #454c54;
    --image-filter: brightness(0.88);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-course-theme="coral"]:not([data-theme]), :root[data-course-theme="coral"][data-theme="auto"] {
        --bg: #14171b;
        --surface: #1e2227;
        --text: #e7e9ec;
        --muted: #9ba2aa;
        --border: #343a41;
        --accent: #ef7f90;
        --accent-text: #1a1214;
        --hl: #4a2a31;
        --hl-strong: #7a3d48;
        --hu-hl: #4a2a3199;
        --shadow: 0 8px 28px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
        --image-border: #454c54;
        --image-filter: brightness(0.88);
        color-scheme: dark;
    }
}