/*
 * Colour, spacing and type tokens.
 *
 * Every colour is one light-dark() declaration rather than a light block and a
 * dark block: the browser picks a side from the element's colour scheme, so
 * "auto" needs no media query and the two themes can never drift apart the way
 * a duplicated palette does.
 *
 * The pre-paint script in the head writes data-theme onto <html>. Absent it, or
 * with it set to auto, the operating system decides.
 */

:root {
    color-scheme: light dark;
}

:root[data-theme='light'] {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

:root {
    /* Page */
    --color-background: light-dark(#fafafa, #121212);
    --color-foreground: light-dark(#222, #dedede);
    --color-section-background: light-dark(#fff, #1a1a1a);
    --color-link: light-dark(#1a5fb4, #608bbf);

    /*
     * Dim text: metadata under a story, help under a field, the footer. Held
     * above the 4.5:1 contrast floor on both backgrounds - it is quiet, not
     * unreadable.
     */
    --color-muted: light-dark(#585858, #9a9a9a);

    /* Hairlines: between stories, between filter rows, around fieldsets. */
    --color-rule: light-dark(#dcdcdc, #303030);
    --color-border: light-dark(#c0c0c0, #444);

    /*
     * The header is the one surface that stays dark in both themes, as it did
     * on the old site. It reads as the archive's own furniture rather than part
     * of the page, which is what keeps a light page from starting with a slab.
     */
    --color-header-background: light-dark(rgba(32, 32, 32, 0.92), rgba(16, 16, 16, 0.92));
    --color-header-foreground: #dedede;
    --color-header-active-background: light-dark(#0186d7, #0b4372);
    --color-header-active-foreground: #fff;

    /* Hairlines drawn on that dark furniture, between one button and the next.
       One value for both themes, the surface under it being the same in both,
       and lifted off it rather than mixed for it. */
    --color-header-rule: rgba(255, 255, 255, 0.16);

    /* Where that furniture ends and the page begins. Brighter in the dark than
       the hairlines between stories: those separate a section from the page it
       is on, this separates #101010 from #121212, and at the weight of a page
       rule the two edges were indistinguishable. */
    --color-header-edge: light-dark(#dcdcdc, rgba(255, 255, 255, 0.28));

    /* Forms */
    --color-field-background: light-dark(#fff, #2a2a2a);
    --color-field-border: light-dark(#aaa, #555);
    --color-field-focus-border: #66afe9;
    --color-accent: light-dark(#1a5fb4, #4a86c8);

    --color-button-background: light-dark(#eee, #333);
    --color-button-foreground: var(--color-foreground);
    --color-button-hover-background: light-dark(#e0ecf8, #3d3d3d);

    --color-primary-background: light-dark(#1a5fb4, #0b4372);
    --color-primary-foreground: #fff;

    /* Overlays: the filter sheet on a phone, and the scrim behind it. */
    --color-overlay-background: var(--color-section-background);
    --color-scrim: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    --shadow-overlay: 0 4px 24px light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.6));

    --color-warning-foreground: light-dark(#a32d00, #e08a5c);

    /* Spacing scale, carried over from ff-reader unchanged. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;

    --radius: 10px;
    --radius-small: 5px;

    /*
     * System UI for the interface - no webfont is downloaded before the page
     * can be read. Source Serif 4 is fetched only by the reading view.
     */
    --font-ui: system-ui, sans-serif;

    /* The four faces the reading view offers. */
    --font-serif: 'Source Serif 4', Georgia, serif;
    --font-sans: system-ui, sans-serif;
    --font-dyslexic: 'OpenDyslexic', system-ui, sans-serif;

    --header-height: 50px;

    /* Nothing is ever a smaller target than a fingertip. */
    --tap-target: 44px;

    /*
     * Buttons and fields. A fingertip's worth by default; on a pointer device
     * that is more than the job needs, and a row of them reads as a wall. One
     * token rather than a height each, because a select that stopped matching
     * the button beside it is exactly how this went wrong before.
     */
    --control-height: var(--tap-target);

    /* The reading bar's single row. In rem as well as px, so a reader who sets
       larger text gets a bar that fits it rather than one that crops it. */
    --reading-bar-height: max(var(--tap-target), 2.75rem);
}