/* The whole visual language. Every value used anywhere in the product comes
   from here. A screen never invents a colour, a size or a spacing. */

:root {
    /* Surfaces. The page is faintly grey so white rows sit on top of it. */
    --canvas: #f6f7f9;
    --surface: #ffffff;
    --surface-sunken: #fafbfc;
    --surface-hover: #f7f8fa;
    --surface-selected: #eef4ff;

    /* Hairlines. The heavier one separates a header from what it heads. */
    --line: #e7e9ed;
    --line-strong: #d6dae1;

    /* Text. Four weights of attention, no more. */
    --ink: #16191d;
    --ink-secondary: #4a5158;
    --ink-muted: #767e88;
    --ink-faint: #a2a9b3;

    /* Status. Derived from the value, never chosen by a person. */
    --green: #17864a;
    --green-mark: #21a35c;
    --green-soft: #e6f4ec;
    --amber: #9a6212;
    --amber-mark: #d18b1e;
    --amber-soft: #fbf1e0;
    --red: #b3251f;
    --red-mark: #d63a33;
    --red-soft: #fbeae9;

    /* One accent, for what can be followed: links, focus, the current row. */
    --accent: #2c5cd6;
    --accent-strong: #1e46ad;
    --accent-soft: #eaf0fd;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
    /* The softer glow a field takes while it is being typed into, and the same
       glow on a field whose answer was not accepted. */
    --focus-glow: 0 0 0 3px var(--accent-soft);
    --focus-glow-bad: 0 0 0 3px var(--red-soft);

    /* Neutral fills for bars and spans that carry no status. */
    --track: #e9ecf0;
    --span: #b9c2cf;
    --span-strong: #8894a5;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
    --font-numeric: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 17px;
    --text-xl: 22px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 12px;
    --space-6: 16px;
    --space-7: 20px;
    --space-8: 24px;
    --space-9: 32px;
    --space-10: 40px;

    --radius-sm: 3px;
    --radius: 5px;
    --radius-lg: 8px;
    /* A mark too small to carry a radius, softened rather than rounded. */
    --radius-mark: 1px;

    --row-height: 40px;
    /* Every control a person operates stands this tall: buttons, inputs, the
       boxes beside them. */
    --control-height: 30px;
    /* A field a person types into, and the buttons standing beside it, are
       taller than a control sitting in a row of other controls. */
    --field-height: 34px;
    /* A search box holds a phrase, not a word. */
    --search-width: 240px;
    /* Wide enough for the longest thing the owner filter has to say. */
    --owner-width: 150px;
    /* Room for the figure at the end of a progress bar, so every bar in a
       column ends at the same place whether it reads 100% or 'Not met'. */
    --progress-figure-width: 48px;
    --sidebar-width: 216px;
    --content-max: 1180px;
    /* How wide a run of text is allowed to get before it stops being read. */
    --measure: 720px;

    /* A caps label is opened up, or the letters sit on each other. */
    --tracking-caps: 0.04em;
    /* The weight of a drawn line: an axis, an edge, the arrow that ends it. */
    --stroke-hair: 1.25px;

    --shadow-popover: 0 1px 2px rgba(16, 20, 27, 0.08), 0 8px 24px rgba(16, 20, 27, 0.12);

    --duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration: 0ms;
    }
}