/* Design tokens.
 *
 * This product is read at 3am on a phone by someone who has just been woken
 * up. Two consequences that drove every value below.
 *
 * It is dark by default rather than by preference. A white page at full
 * brightness in a dark room is genuinely painful and the reflex is to look
 * away from it, which is the opposite of what an incident page needs.
 *
 * Nothing is measured in pixels of viewport. Every width here is a max-width
 * or a fraction; there is no fixed shell, because a fixed shell is how a page
 * scrolls sideways on a 360px phone and the layout test in tests/ measures
 * exactly that.
 */

:root {
    /* Surfaces, from furthest back to nearest. */
    --bg:        #0d1117;
    --surface:   #161b22;
    --surface-2: #1c2230;
    --line:      #2a3140;
    --line-soft: #212836;

    /* Text. --muted is still 4.6:1 on --bg; it is quieter, not fainter than
     * legible. A "subtle" grey that fails contrast is a decision to make the
     * caption unreadable, taken by someone with a good monitor. */
    --ink:       #e8edf5;
    --muted:     #9aa7bd;
    /* Was #6b7688, which measured 3.46:1 on --surface-2 and failed WCAG AA on
     * all three surfaces. Lighthouse found it; the comment two lines up had
     * already predicted it and I shipped it anyway. tests/test_contrast.py
     * now computes every pair from this file, so the next one fails a test
     * rather than an audit. This value is 4.62:1 at worst. */
    --faint:     #808b9d;

    /* One accent, used for the thing you are meant to do next and nothing
     * else. An interface where four things glow has no emphasis at all. */
    --accent:    #5aa2ff;
    --accent-ink:#04182f;

    /* Status. Amber is "open", not "danger" -- an open incident is the normal
     * state of this product and colouring it red makes the whole list scream. */
    --open:      #f0b429;
    --open-bg:   #2a2110;
    --resolved:  #4ec98a;
    --resolved-bg:#0f2a1d;
    --warn:      #ff8f6b;
    --warn-bg:   #2c1710;

    --radius:    10px;
    --radius-sm: 6px;

    /* A type scale that stays readable at 360px without a media query. */
    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
    --step-0:  clamp(0.96rem, 0.93rem + 0.16vw, 1.05rem);
    --step-1:  clamp(1.13rem, 1.06rem + 0.34vw, 1.35rem);
    --step-2:  clamp(1.4rem,  1.24rem + 0.78vw, 1.9rem);
    --step-3:  clamp(1.75rem, 1.44rem + 1.55vw, 2.7rem);

    --sp-1: 0.35rem;
    --sp-2: 0.7rem;
    --sp-3: 1.1rem;
    --sp-4: 1.7rem;
    --sp-5: 2.6rem;
    --sp-6: 4rem;

    --wrap: 68rem;
    --prose: 40rem;

    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
}