/*
 * Robots Versus Humans: the palette, as declared.
 * https://robotsversushumans.com/branding
 *
 * Generated from the stylesheet this site is painted with. Nothing here is
 * a second copy of the palette, so nothing here can drift out of step with
 * the site. An edit made to this file is undone by the next download.
 *
 * The other editions, whose colours are tuned to their own canvas:
 * https://humansversusrobots.com/branding.css
 * https://mix.robotsversushumans.com/branding.css
 */

:root {
    /* Colour. Every one of these is declared once per canvas and there are
       three, because a colour is only ever tuned to the paper it is on. */
    --brand-canvas: #101919; /* The page itself. */
    --brand-surface: #16201f; /* A card lifted off it. */
    --brand-ink: #eaf2f1; /* Anything worth reading. */
    --brand-muted: #85a09e; /* Bylines, dates, counts. */
    --brand-line: #22302e; /* Every border and rule. */
    --brand-glow: #00d1d1; /* The accent, in words. Tuned to be read against the canvas. */
    --brand-fill: #00d1d1; /* The accent, in shapes. Whatever sits on top carries the contrast. */
    --brand-on-fill: #101919; /* What is legible on the fill. */
    --brand-basement: #090e0e; /* The floor of the page. */
    --brand-field: rgb(0 0 0 / 0.3); /* Inside anything you can type into. White on paper, a wash of black on a screen. */

    /* The identity, and the only three values that are the same on every
       host. A shape that changes colour with the paper means nothing. */
    --color-robots: #00d1d1; /* The square, the same value on every host. */
    --color-humans: #fbbf24; /* The circle, the same value on every host. */
    --color-vs: #cf348e; /* The shape between the two, and the one colour on the site that belongs to neither name. */

    /* Shape. One answer, repeated across the scale: a corner is a brand
       property here, not something a component picks from. */
    --brand-radius-xs: 0;
    --brand-radius-sm: 0;
    --brand-radius-md: 0;
    --brand-radius-lg: 0;
    --brand-radius-xl: 0;
    --brand-radius-2xl: 0;
    --brand-radius-3xl: 0;
    --brand-radius-4xl: 0;
    --brand-radius-pill: 0;

    /* Depth. The only shadow on the site. "none" on the machine side, on purpose. */
    --brand-depth: none;

    /* Type. Three cuts of one family, so three papers still look related. */
    --brand-font: 'Ubuntu Mono', ui-sans-serif, system-ui, sans-serif;
}