/* Generated from shared/src/css/theme.css by backend/tools/sync-shared.py. Do not edit. */
/* psi-overflow design tokens.
 *
 * With theme-dark.css, the single source of truth for colour, radius and
 * shadow, shared by the server-rendered pages and by the embed's shadow
 * roots. Do not redefine these anywhere else.
 *
 * The embed imports this file directly (Vite `?inline`); the backend serves a copy
 * synced by backend/tools/sync-shared.py, and a test fails if the two drift apart.
 *
 * Every token is named --psi-overflow-*. The long prefix is deliberate: the
 * embed's tokens live on :host inside a shadow root on somebody else's page,
 * and a short prefix risks colliding with the host site's own variables.
 * The backend pages use the same full names so there is one vocabulary.
 *
 * These are the light set, and the tokens that do not change with the scheme.
 * The dark set is theme-dark.css, loaded after this file under a media query
 * its loader picks: the backend's pages under the reader's
 * `prefers-color-scheme`, the embed under the host page's `color-scheme`
 * where the page names one (embed/src/page/color-scheme.ts).
 */

:root,
:host {
    /* paper and ink */
    --psi-overflow-paper: #f6f8f8;
    --psi-overflow-surface: #ffffff;
    --psi-overflow-surface-sunk: #eef2f2;
    --psi-overflow-ink: #152423;
    --psi-overflow-ink-soft: #52635f;
    --psi-overflow-ink-faint: #7f918d;
    --psi-overflow-rule: #dde5e3;
    --psi-overflow-rule-strong: #c2cfcc;

    /* teal: the primary accent */
    --psi-overflow-accent: #0f766e;
    --psi-overflow-accent-hover: #115e59;
    --psi-overflow-accent-wash: #d8efec;
    --psi-overflow-accent-contrast: #ffffff;

    /* status */
    --psi-overflow-review: #a45c09;
    --psi-overflow-review-wash: #fbeed6;
    --psi-overflow-answered: #0f766e;
    --psi-overflow-answered-wash: #d8efec;
    --psi-overflow-danger: #b3283c;
    --psi-overflow-danger-wash: #fae3e6;

    /* the highlighter used for quoted passages and ?psi-overflow marks */
    --psi-overflow-mark: #f5e27a;
    --psi-overflow-mark-strong: #ffd429;
    --psi-overflow-mark-ink: #3d3712;

    /* charts (the admin pages' statistics): a count's colour, which Susi's
       share has too, and the tutors' and their tutorials', checked against
       each other for colour blindness and against the surface; and a
       heatmap's four steps of the first, lighter to darker */
    --psi-overflow-chart: #0d9488;
    --psi-overflow-chart-tutors: #7c5cd6;
    --psi-overflow-heat-1: #cdeee9;
    --psi-overflow-heat-2: #8fd5cb;
    --psi-overflow-heat-3: #3fb0a3;
    --psi-overflow-heat-4: #0b7a70;

    --psi-overflow-radius-small: 6px;
    --psi-overflow-radius: 10px;
    --psi-overflow-radius-large: 16px;

    --psi-overflow-shadow-raise:
        0 1px 2px rgba(21, 36, 35, 0.05), 0 6px 16px -10px rgba(21, 36, 35, 0.25);
    --psi-overflow-shadow-pop:
        0 2px 4px rgba(21, 36, 35, 0.08), 0 18px 40px -18px rgba(21, 36, 35, 0.35);
    /* The pop, cast to the left: for a surface along the right edge, whose
       whole length is the edge that sets it off from what it lies over. */
    --psi-overflow-shadow-side:
        -2px 0 6px rgba(21, 36, 35, 0.08), -16px 0 40px -14px rgba(21, 36, 35, 0.34);
    /* Over the page, behind what is put up over it: the embed's chat sheet
       and its dialogs, the admin pages' dialogs. */
    --psi-overflow-backdrop: rgba(9, 20, 19, 0.45);

    --psi-overflow-font:
        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --psi-overflow-font-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}