/*
| The dark theme: the colour tokens of app.css with other values, and nothing
| else. The page's <link> to this file carries a media query that says when it
| applies — when the device asks for dark, always, or never (App\Enums\Theme) —
| so there is one list of dark colours and no script decides anything.
|
| Rules for changing it (docs/design-system.md, "Dark theme"):
|   - A token added to app.css that holds a colour or a shadow gets a value here.
|   - No selectors other than :root. If a component looks wrong in the dark, it
|     is using a colour that is not a token: fix that in app.css.
|   - Surfaces get lighter as they come closer (ground < surface < subtle);
|     shadows barely show on a dark ground, so depth is carried by that.
|   - Text on its background keeps at least 4.5:1, control borders 3:1.
|   - Keep --surface equal to platform.theme_colors.dark in config/platform.php.
*/

:root {
    color-scheme: dark;

    /* Surfaces and text: dark greys with a little of the brand's teal, never pure black or pure white. */
    --ground: #0f1719;
    --surface: #182326;
    --surface-subtle: #1d2a2d;
    --emphasis: #36494c;
    --on-emphasis: #f2f6f5;
    --track: #2c3a3d;
    --scrim: rgba(0, 0, 0, .62);
    --ink: #e7eeec;
    --ink-soft: #cbd5d3;
    --ink-faint: #b4c0be;
    --muted: #9dabaa;

    /* Lines */
    --line: #2c3a3d;
    --line-soft: #243134;
    --control: #70817f;
    --control-soft: #43524f;

    /* Brand: the teal is lighter so it reads as text, and carries dark text as a button. */
    --primary: #5ec4cc;
    --primary-strong: #86d6dc;
    --primary-soft: #143a3e;
    --on-primary: #05272b;
    --focus: #7fd3d9;
    --panel: #0f3f44;
    --on-panel: #eaf5f4;
    --on-panel-soft: #a8cfcd;
    --logo-ground: #f2f6f5;
    --video-ground: #000000;
    --on-video: #ffffff;

    /* States */
    --good: #6fd29d;
    --good-soft: #143526;
    --warn: #f0c264;
    --warn-soft: #3b2d0c;
    --bad: #ff9f96;
    --bad-soft: #46211e;
    --bad-faint: #2c1c1b;
    --bad-strong: #ffb8b1;
    --bad-line: #6f302b;
    --neutral-soft: #253336;
    --highlight: #5c4a0f;
    --highlight-line: #f0c264;
    --flag: #f0b44a;
    --on-state: #10191b;
    --accent: #f0a955;
    --plate: #3b4f52;

    /* Depth */
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-dialog: 0 24px 64px rgba(0, 0, 0, .6);
    --shadow-bar: 0 -6px 20px rgba(0, 0, 0, .35);
    --shadow-lift: 0 6px 18px rgba(0, 0, 0, .35);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dabaa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* The crayons and the picture they colour are the same in the dark (app.css, decision 72). */
    --crayon-red: #e53935;
    --crayon-orange: #fb8c00;
    --crayon-yellow: #fdd835;
    --crayon-green: #43a047;
    --crayon-blue: #1e88e5;
    --crayon-purple: #8e24aa;
    --crayon-pink: #f06292;
    --crayon-brown: #8d6e63;
    --crayon-grey: #9e9e9e;
    --crayon-black: #212121;
    --paint-edge: #33444d;
    --paint-halo: #ffffff;

    /* A book's cover is the same in the dark (app.css, decision 116). */
    --kind-students_book: #0d5c63;
    --kind-students_book-shape: #e9a23b;
    --kind-workbook: #a65a14;
    --kind-workbook-shape: #0d5c63;
    --kind-teachers_book: #2c3f4a;
    --kind-teachers_book-shape: #e9a23b;
    --kind-guide: #1a6b45;
    --kind-guide-shape: #f3d27a;
    --kind-tests: #8c3d4f;
    --kind-tests-shape: #f3d27a;
    --kind-resources: #6a4c93;
    --kind-resources-shape: #86d6dc;
    --kind-method: #2f4b8a;
    --kind-method-shape: #86d6dc;
    --kind-other: #3d5866;
    --kind-other-shape: #e9a23b;
    --on-cover: #ffffff;
    --cover-shade: rgba(0, 0, 0, .2);
    --cover-glow: rgba(255, 255, 255, .16);

    /* An answer sheet is paper in the dark too: as it will be printed (app.css). */
    --sheet-ground: #ffffff;
    --sheet-ink: #111618;
    --sheet-line: #5f6b67;
}