/* 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 {
    /* ------------------------------------------------------------------
     * THE PALETTE IS THE IMPORTED FRAME'S, NOT THIS REPOSITORY'S.
     *
     * design-exports/raw/2 Sentinel.dc.html, section sn-01, and the shared
     * system block in design-exports/PAIRING.md. The standing rule here is
     * that an imported frame outranks a self-made design on arrival, and this
     * one replaces a navy/blue scheme that was drawn in this repository.
     *
     * ONE VALUE IS NOT THE FRAME'S, and it is measured rather than preferred.
     * The frame's third text tier is `muted #6E6E75`, which is **3.81:1** on
     * the frame's own page colour and fails WCAG AA for normal text — and it
     * is used in the frame at 11px, which is as normal as text gets. This site
     * holds Lighthouse accessibility 100 and there is already a decision in
     * this file's history about a colour that measured 3.46:1.
     *
     * So --faint is #828289: the smallest step that clears 4.5:1 against the
     * LIGHTEST surface it is ever printed on, --surface-2, where it measures
     * 4.51:1. The first attempt was #7A7A81, chosen against the page colour
     * alone — 4.53:1 there and 4.32:1 on a raised card, which is most of where
     * this tier actually appears. tests/test_design_frame.py caught it.
     * See APPROVALS.md A-47 for why this deviation and no other.
     * ------------------------------------------------------------------ */

    /* Surfaces, from furthest back to nearest. Frame: page / card / raised. */
    --bg:        #0E0E0F;
    --surface:   #141415;
    --surface-2: #1B1B1D;
    --line:      #29292C;
    /* The frame's `faint #3A3A3F`. It is 1.71:1 and is a LINE colour in the
     * frame — the secondary button border and the badge outlines. It is never
     * text there and must never become text here. */
    --line-soft: #3A3A3F;

    /* Text, in the frame's three tiers. */
    --ink:       #ECECED;
    --muted:     #A5A5AB;   /* frame `dim`  — 7.87:1 on --bg */
    --faint:     #828289;   /* frame `muted` lifted for AA — 4.51:1 on --surface-2 */

    /* 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.
     * The frame calls this one "the spike". */
    --accent:    #E8635A;
    --accent-ink:#141415;

    /* 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.
     * Amber is the frame's own #E8A33C; the frame specifies no resolved
     * colour, so the green is this repository's, retuned to sit in the new
     * palette rather than invented to match a frame that does not name one. */
    --open:      #E8A33C;
    --open-bg:   #2A1F10;
    --resolved:  #59C08D;
    --resolved-bg:#10241B;
    --warn:      #E8635A;
    --warn-bg:   #2A1614;

    --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;

    /* The frame's two families, self-hosted in app/static/fonts.css. The
     * fallbacks are not decoration: `font-display: swap` means the first
     * paint of every page is in them. */
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
            Consolas, "Liberation Mono", monospace;
    --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}