html, body {
    height: 100%;
}

/* The whole app is drawn a fifth larger than a browser's default, the same scale as every
   *Flex tool. Every size in this app is in `rem`, so this one number is the app's scale.

   The media queries are the exception and cannot use it: `rem` inside a media query is
   always the browser's initial 16px, whatever this says. So every breakpoint in this app
   is written at 1.2x the width it would otherwise be. */
:root {
    font-size: 120%;
}

/* CsvFlex theme.
   Dark is the default; light applies when the user picks it, or when the system asks for
   it and the user has not overridden that. Every token is defined here on bare `:root` so
   no colour exists only inside a media query.

   The accent is orchid, between JwtFlex's violet and DiffFlex's pink. The series colours
   are for charts only: the first is the accent, and the rest are told apart by hue and
   lightness both, so a pie still reads for most kinds of colour blindness. */
:root {
    color-scheme: dark;
    --cv-bg: #0d1015;
    --cv-pane: #15191f;
    --cv-pane-alt: #11151a;
    --cv-chrome: #0a0d11;
    --cv-chrome-2: #12161c;
    --cv-chrome-hover: #1e242d;
    --cv-border: #262f3a;
    --cv-border-soft: #1a212a;
    --cv-text: #dde5ee;
    --cv-muted: #8391a2;
    --cv-faint: #56626f;
    --cv-accent: #b77cf2;
    --cv-accent-bright: #ca9cf6;
    --cv-accent-ink: #160b22;
    --cv-accent-dim: rgba(183, 124, 242, 0.45);
    --cv-accent-wash: rgba(183, 124, 242, 0.14);

    --cv-danger: #f2777a;
    --cv-danger-wash: rgba(242, 119, 122, 0.12);
    --cv-ok: #5fc97e;

    /* One hue per pane, used only for the hairline under its header. */
    --cv-hue-tables: #8391a2;
    --cv-hue-query: #b77cf2;
    --cv-hue-results: #4cb7ec;

    --cv-row-alt: rgba(255, 255, 255, 0.022);
    --cv-row-hover: rgba(183, 124, 242, 0.07);
    --cv-null: #56626f;

    --cv-series-1: #b77cf2;
    --cv-series-2: #4cb7ec;
    --cv-series-3: #e8a33c;
    --cv-series-4: #5fc97e;
    --cv-series-5: #f2777a;
    --cv-series-6: #e6d23c;
    --cv-series-7: #2fc8b4;
    --cv-series-8: #e46fc8;
    --cv-series-9: #8391a2;

    --cv-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
    --cv-pop-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
    color-scheme: light;
    --cv-bg: #e7ebf0;
    --cv-pane: #ffffff;
    --cv-pane-alt: #f7f9fb;
    --cv-chrome: #f9fbfc;
    --cv-chrome-2: #f1f4f7;
    --cv-chrome-hover: #e4e9ef;
    --cv-border: #ccd5df;
    --cv-border-soft: #dde4eb;
    --cv-text: #18202a;
    --cv-muted: #5a6673;
    --cv-faint: #98a3af;
    --cv-accent: #7c3fc4;
    --cv-accent-bright: #8d52d4;
    --cv-accent-ink: #ffffff;
    --cv-accent-dim: rgba(124, 63, 196, 0.45);
    --cv-accent-wash: rgba(124, 63, 196, 0.10);

    --cv-danger: #c02f33;
    --cv-danger-wash: rgba(192, 47, 51, 0.08);
    --cv-ok: #23863f;

    --cv-hue-tables: #5a6673;
    --cv-hue-query: #7c3fc4;
    --cv-hue-results: #1a86c4;

    --cv-row-alt: rgba(24, 32, 42, 0.025);
    --cv-row-hover: rgba(124, 63, 196, 0.06);
    --cv-null: #98a3af;

    --cv-series-1: #7c3fc4;
    --cv-series-2: #1a86c4;
    --cv-series-3: #b3711a;
    --cv-series-4: #23863f;
    --cv-series-5: #c02f33;
    --cv-series-6: #8a7a00;
    --cv-series-7: #0d7d72;
    --cv-series-8: #b02a93;
    --cv-series-9: #5a6673;

    --cv-shadow: 0 1px 2px rgba(24, 32, 42, 0.06);
    --cv-pop-shadow: 0 10px 30px rgba(24, 32, 42, 0.18);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --cv-bg: #e7ebf0;
        --cv-pane: #ffffff;
        --cv-pane-alt: #f7f9fb;
        --cv-chrome: #f9fbfc;
        --cv-chrome-2: #f1f4f7;
        --cv-chrome-hover: #e4e9ef;
        --cv-border: #ccd5df;
        --cv-border-soft: #dde4eb;
        --cv-text: #18202a;
        --cv-muted: #5a6673;
        --cv-faint: #98a3af;
        --cv-accent: #7c3fc4;
        --cv-accent-bright: #8d52d4;
        --cv-accent-ink: #ffffff;
        --cv-accent-dim: rgba(124, 63, 196, 0.45);
        --cv-accent-wash: rgba(124, 63, 196, 0.10);

        --cv-danger: #c02f33;
        --cv-danger-wash: rgba(192, 47, 51, 0.08);
        --cv-ok: #23863f;

        --cv-hue-tables: #5a6673;
        --cv-hue-query: #7c3fc4;
        --cv-hue-results: #1a86c4;

        --cv-row-alt: rgba(24, 32, 42, 0.025);
        --cv-row-hover: rgba(124, 63, 196, 0.06);
        --cv-null: #98a3af;

        --cv-series-1: #7c3fc4;
        --cv-series-2: #1a86c4;
        --cv-series-3: #b3711a;
        --cv-series-4: #23863f;
        --cv-series-5: #c02f33;
        --cv-series-6: #8a7a00;
        --cv-series-7: #0d7d72;
        --cv-series-8: #b02a93;
        --cv-series-9: #5a6673;

        --cv-shadow: 0 1px 2px rgba(24, 32, 42, 0.06);
        --cv-pop-shadow: 0 10px 30px rgba(24, 32, 42, 0.18);
    }
}

/* The workbench owns the viewport; nothing outside it should scroll. */
body:has(.cv-shell) {
    overflow: hidden;
    margin: 0;
    background: var(--cv-bg);
}

/* A standing document scrolls, so the page background has to be the theme's rather than
   the browser's white - otherwise overscroll flashes white behind a dark page. */
body:has(.doc) {
    margin: 0;
    background: var(--cv-bg);
}