/* tokens.css: the Steel and Copper palette and the spacing scale (docs/design.md).
   This is the source. The copies in site/public/css/shared/ and streamer/ui/shared/ are written by
   scripts/sync-shared-ui.mjs: edit here, never a copy. */
:root {
    --bg: #111315;          /* the page */
    --surface: #1C1F23;     /* panels */
    --raised: #262A2F;      /* pills and small raised marks */
    --raised-hover: #30353B;
    --line: #30353B;        /* dividers and panel edges */
    --line-soft: #24282D;   /* rows in a list on the page itself */
    --edge: #626A74;        /* field borders: 3:1 against the field and the page */
    --text: #EDEFF2;
    --muted: #A3AAB3;       /* hints: 7.9:1 on the page, 7.1:1 on a panel */
    --silver: #C3CAD3;      /* secondary buttons: a silver outline */
    --silver-hover: #D6DCE3;
    --silver-tint: rgb(195 202 211 / .12);   /* a secondary button under the pointer */
    --btn-secondary: #2C3138;               /* a secondary button on the page (--bg), one step lighter than it */
    --btn-secondary-hover: #373D45;
    --btn-secondary-panel: #343A42;         /* the same inside a panel or dialog (--surface) */
    --btn-secondary-panel-hover: #3F464F;
    --btn-secondary-edge: #4A515B;
    --copper: #C67B3E;      /* the signature: the panel rule, the current section, the focus ring, tags */
    --copper-tint: rgb(198 123 62 / .14);    /* copper, nearly clear: hover on the menu and the ? */
    --copper-line: #6E4526; /* copper as a hairline: the separators of the status strip */
    --copper-ink: #2A1206;  /* text on the light cut (6.1:1 at its darkest stop) */
    /* The light cut of the polished copper (docs/design.md), for the primary button and anything with text on it. */
    --copper-light: linear-gradient(160deg, #C98A55 0%, #E2A46C 30%, #FFE0BC 48%, #EDB07A 62%, #D2925C 100%);
    --copper-light-hover: linear-gradient(160deg, #D59560 0%, #ECAE77 30%, #FFE8CC 48%, #F4BA86 62%, #DD9D67 100%);
    --live: #C8102E;        /* live, on air, Stop: the live light only */
    --live-glow: rgb(200 16 46 / .4);
    --error: #FF5A5F;       /* always with a "!" so it never reads as live */
    --danger: #A3262E;      /* buttons that cannot be undone, with white text (7.3:1) */
    --danger-hover: #B42E37;
    --danger-text: #EE7A80; /* danger as text and outline: 6.1:1 on a panel, 5.5:1 on its hover tint */
    --danger-tint: rgb(163 38 46 / .2);
    --ok: #6CC99A;
    --warning: #E0A33A;     /* waiting, a warning: amber, never decoration */
    --white: #FFFFFF;
    --twitch: #9146FF;      /* the platforms' own marks: the Sign In with Twitch button, and their logos */
    --youtube: #FF0000;
    --kick: #53FC18;
    --discord: #5865F2;     /* white text on it 4.6:1; as a mark 3.6:1 on a panel */
    /* The spacing scale. */
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
    /* What the browser draws itself (#348): dark scrollbars and controls, and ticks and radios in silver,
       not the browser's own blue (the palette has no blue). */
    color-scheme: dark;
    accent-color: var(--silver);
}