html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The whole app is drawn a fifth larger than a browser's default, the same scale as
   TextFlex, JwtFlex and CronFlex - the *Flex apps are 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. On a phone the scale steps back
   down to the browser's default - a fifth larger is generous on a desktop and cramped on
   a 390px screen. */
:root {
    font-size: 120%;
}

@media (max-width: 720px) {
    :root {
        font-size: 100%;
    }
}

/* OGFlex theme: graphite and coral. The coral is the colour of the image band in the
   mark - a link preview's picture - and is used for what the user acts on: the pressed
   tab, the primary buttons, the focus ring.

   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;
    --og-bg: #0f1114;
    --og-pane: #171a1f;
    --og-pane-alt: #13161a;
    --og-field: #0f1216;
    --og-chrome: #0b0d10;
    --og-chrome-2: #14171b;
    --og-chrome-hover: #22262d;
    --og-border: #2a3038;
    --og-border-soft: #1f242b;
    --og-text: #e7eaef;
    --og-muted: #8f98a6;
    --og-faint: #5d6672;
    --og-accent: #ff8a5c;
    --og-accent-bright: #ffa47f;
    --og-accent-ink: #2b0e03;
    --og-accent-dim: rgba(255, 138, 92, 0.45);
    --og-accent-wash: rgba(255, 138, 92, 0.13);

    --og-ok: #4fcf8e;
    --og-warn: #f2c14e;
    --og-bad: #f2777a;

    /* The generated code. */
    --og-code-tag: #7cb7ff;
    --og-code-attr: #c3a6ff;
    --og-code-value: #9fe0a8;
    --og-code-comment: #66707d;

    --og-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] {
    color-scheme: light;
    --og-bg: #eef0f3;
    --og-pane: #ffffff;
    --og-pane-alt: #f7f8fa;
    --og-field: #ffffff;
    --og-chrome: #fbfbfc;
    --og-chrome-2: #f3f4f6;
    --og-chrome-hover: #e7e9ed;
    --og-border: #d3d8de;
    --og-border-soft: #e4e7eb;
    --og-text: #1a1d22;
    --og-muted: #5b6470;
    --og-faint: #9aa2ad;
    --og-accent: #bf4520;
    --og-accent-bright: #d4542b;
    --og-accent-ink: #ffffff;
    --og-accent-dim: rgba(191, 69, 32, 0.45);
    --og-accent-wash: rgba(191, 69, 32, 0.08);

    --og-ok: #1d8a4f;
    --og-warn: #a86b00;
    --og-bad: #c02f33;

    --og-code-tag: #1f5fbf;
    --og-code-attr: #7a3fc4;
    --og-code-value: #217a3a;
    --og-code-comment: #8b949e;

    --og-shadow: 0 1px 2px rgba(24, 32, 42, 0.06), 0 6px 18px rgba(24, 32, 42, 0.06);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --og-bg: #eef0f3;
        --og-pane: #ffffff;
        --og-pane-alt: #f7f8fa;
        --og-field: #ffffff;
        --og-chrome: #fbfbfc;
        --og-chrome-2: #f3f4f6;
        --og-chrome-hover: #e7e9ed;
        --og-border: #d3d8de;
        --og-border-soft: #e4e7eb;
        --og-text: #1a1d22;
        --og-muted: #5b6470;
        --og-faint: #9aa2ad;
        --og-accent: #bf4520;
        --og-accent-bright: #d4542b;
        --og-accent-ink: #ffffff;
        --og-accent-dim: rgba(191, 69, 32, 0.45);
        --og-accent-wash: rgba(191, 69, 32, 0.08);

        --og-ok: #1d8a4f;
        --og-warn: #a86b00;
        --og-bad: #c02f33;

        --og-code-tag: #1f5fbf;
        --og-code-attr: #7a3fc4;
        --og-code-value: #217a3a;
        --og-code-comment: #8b949e;

        --og-shadow: 0 1px 2px rgba(24, 32, 42, 0.06), 0 6px 18px rgba(24, 32, 42, 0.06);
    }
}

/* Both layouts scroll as a page, so the page background has to be the theme's rather
   than the browser's white - otherwise overscroll flashes white behind a dark page. Set
   on body because it is body's background that propagates to the canvas. */
body {
    margin: 0;
    background: var(--og-bg);
    color: var(--og-text);
    font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
}