html, body {
    min-height: 100%;
}

/* The whole app is drawn a fifth larger than a browser's default, the same scale as the
   other *Flex apps - they are all drawn at one size.

   Every size in this app is in `rem`, so this one number is the app's scale and nothing
   else has to know about it. A percentage rather than a pixel count so that a reader who
   has already set a larger default font in their browser keeps the increase.

   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%;
}

/* Phones get the browser's own scale: there the extra fifth costs more room than it
   gives in legibility. */
@media (max-width: 599.98px) {
    :root {
        font-size: 100%;
    }
}

/* FavIconFlex theme.
   A warm violet-black, with tangerine as the accent - the colour of the brand mark - and
   a violet second accent for the things that are not actions (the mirror axes, the
   pixel at the heart of the mark). 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. */
:root {
    color-scheme: dark;
    --fi-bg: #100f16;
    --fi-pane: #17161e;
    --fi-pane-alt: #13121a;
    --fi-raised: #1d1c26;
    --fi-chrome: #0c0b11;
    --fi-chrome-2: #121118;
    --fi-chrome-hover: #232130;
    --fi-border: #2c2938;
    --fi-border-soft: #1f1d29;
    --fi-text: #efebf5;
    --fi-muted: #9d97ad;
    --fi-faint: #655f76;

    --fi-accent: #ff8a3d;
    --fi-accent-bright: #ffa465;
    --fi-accent-ink: #2b1204;
    --fi-accent-dim: rgba(255, 138, 61, 0.45);
    --fi-accent-wash: rgba(255, 138, 61, 0.13);
    --fi-accent-2: #9b8cff;
    --fi-accent-2-wash: rgba(155, 140, 255, 0.14);

    --fi-ok: #5cd69a;
    --fi-warn: #f4c152;
    --fi-danger: #f2777a;

    /* Transparency, and the pixel grid drawn over it. */
    --fi-checker-a: #1f1d28;
    --fi-checker-b: #282533;
    --fi-grid-line: rgba(255, 255, 255, 0.07);
    --fi-grid-major: rgba(255, 255, 255, 0.17);

    --fi-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.18);
    --fi-focus: 0 0 0 2px var(--fi-accent-dim);
}

:root[data-theme="light"] {
    color-scheme: light;
    --fi-bg: #f1eff4;
    --fi-pane: #ffffff;
    --fi-pane-alt: #f8f7fa;
    --fi-raised: #ffffff;
    --fi-chrome: #fbfaf8;
    --fi-chrome-2: #f4f2f6;
    --fi-chrome-hover: #e9e5ee;
    --fi-border: #d8d3e0;
    --fi-border-soft: #e7e3ec;
    --fi-text: #1c1926;
    --fi-muted: #5f596f;
    --fi-faint: #a29cb1;

    --fi-accent: #c8500e;
    --fi-accent-bright: #dd5f18;
    --fi-accent-ink: #ffffff;
    --fi-accent-dim: rgba(200, 80, 14, 0.42);
    --fi-accent-wash: rgba(200, 80, 14, 0.09);
    --fi-accent-2: #5a46d6;
    --fi-accent-2-wash: rgba(90, 70, 214, 0.09);

    --fi-ok: #1d8a4f;
    --fi-warn: #9a6a00;
    --fi-danger: #c02f33;

    --fi-checker-a: #ffffff;
    --fi-checker-b: #ebe8f0;
    --fi-grid-line: rgba(28, 25, 38, 0.08);
    --fi-grid-major: rgba(28, 25, 38, 0.2);

    --fi-shadow: 0 1px 2px rgba(28, 25, 38, 0.06), 0 8px 24px rgba(28, 25, 38, 0.06);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --fi-bg: #f1eff4;
        --fi-pane: #ffffff;
        --fi-pane-alt: #f8f7fa;
        --fi-raised: #ffffff;
        --fi-chrome: #fbfaf8;
        --fi-chrome-2: #f4f2f6;
        --fi-chrome-hover: #e9e5ee;
        --fi-border: #d8d3e0;
        --fi-border-soft: #e7e3ec;
        --fi-text: #1c1926;
        --fi-muted: #5f596f;
        --fi-faint: #a29cb1;

        --fi-accent: #c8500e;
        --fi-accent-bright: #dd5f18;
        --fi-accent-ink: #ffffff;
        --fi-accent-dim: rgba(200, 80, 14, 0.42);
        --fi-accent-wash: rgba(200, 80, 14, 0.09);
        --fi-accent-2: #5a46d6;
        --fi-accent-2-wash: rgba(90, 70, 214, 0.09);

        --fi-ok: #1d8a4f;
        --fi-warn: #9a6a00;
        --fi-danger: #c02f33;

        --fi-checker-a: #ffffff;
        --fi-checker-b: #ebe8f0;
        --fi-grid-line: rgba(28, 25, 38, 0.08);
        --fi-grid-major: rgba(28, 25, 38, 0.2);

        --fi-shadow: 0 1px 2px rgba(28, 25, 38, 0.06), 0 8px 24px rgba(28, 25, 38, 0.06);
    }
}

body {
    margin: 0;
    background: var(--fi-bg);
    color: var(--fi-text);
}