/* Every colour, stack, radius, shadow and shared measure the components read.
   A component rule that writes a literal colour puts it beyond the reach of
   this file. Type sizes are twitchlive's own rem steps and sit in the rule
   that uses them; DESIGN.md lists the ramp. */

:root {
    /* Surface is the card and the bar, slate is the field they sit on.
     Contrast on surface: ink 16.1, muted 6.0, green 5.2, red 4.8, blue 4.5. */
    --surface: #fff;
    --slate: #f8f9fa;
    --line: #dadce0;
    --ink: #202124;
    --muted: #5f6368;

    /* Four state hues, one job each: blue finds, green acts, amber warns, red
     destroys. Deep is the hover or the text on a tint; tint is a fill. */
    --blue: #1a73e8;
    --blue-deep: #1557b0;
    --blue-tint: #e8f0fe;
    --green: #2c7a4e;
    --green-deep: #1e5937;
    --green-tint: #e6f4ea;
    --amber: #bf7a00;
    --amber-deep: #a06800;
    --amber-tint: #fef7e0;
    --red: #d93025;
    --red-hover: #c5221f;
    --red-deep: #b3261e;
    --red-tint: #fce8e6;

    /* The data hue draws a measured quantity: a sparkline, a bar, a heatmap
     cell, a chart's area, the live badge. A consumer with a brand colour for
     its data overrides --data and --data-deep, and the steps follow. */
    --data: #7c4dff;
    --data-deep: #5b2bb0;

    /* The empty part of a bar and an empty heatmap cell, one step under line. */
    --track: #ebedf0;

    /* The data hue at three strengths over whatever is under it: a heatmap's
     levels, a bar's lighter part. One hue, so they read as more and less. */
    --data-1: rgb(from var(--data) r g b / 24%);
    --data-2: rgb(from var(--data) r g b / 48%);
    --data-3: rgb(from var(--data) r g b / 72%);
    --sans: sans-serif;
    --mono: ui-monospace, sfmono-regular, menlo, monospace;

    /* One edge weight everywhere. */
    --edge: 1px solid var(--line);
    --r-card: 6px;
    --r-tile: 8px;
    --r-control: 4px;
    --r-bar: 3px;
    --r-mark: 2px;
    --r-pill: 999px;

    /* The bar floats; a table lifts off the card by the first shadow alone; a
     menu and a hovered card float above the page. */
    --shadow-bar: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);
    --shadow-lift: 0 1px 2px 0 rgb(60 64 67 / 30%);
    --shadow-hover: 0 2px 8px rgb(60 64 67 / 20%);
    --shadow-menu: 0 4px 14px rgb(60 64 67 / 25%);

    /* Over a thumbnail, whatever the thumbnail is. */
    --scrim: rgb(0 0 0 / 75%);
    --page-max: 1500px;
    --login-max: 450px;
    --field-max: 320px;

    /* A card in a grid: 270px gives five across the 1500px page. */
    --card-min: 270px;

    /* A stat tile: 150px gives two across a phone. */
    --tile-min: 150px;

    /* The term column of a facts list, wide enough for "Last login". */
    --label-col: 150px;
    --fade: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --fade: 0s;
    }
}