/*
 * Versus: the palette, as declared.
 * https://mix.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://robotsversushumans.com/branding.css
 * https://humansversusrobots.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: #1b1a33; /* The page itself. */
    --brand-surface: #252445; /* A card lifted off it. */
    --brand-ink: #ecebf7; /* Anything worth reading. */
    --brand-muted: #9a97bd; /* Bylines, dates, counts. */
    --brand-line: #332f56; /* Every border and rule. */
    --brand-glow: #a5a1ff; /* The accent, in words. Tuned to be read against the canvas. */
    --brand-fill: #a5a1ff; /* The accent, in shapes. Whatever sits on top carries the contrast. */
    --brand-on-fill: #1b1a33; /* What is legible on the fill. */
    --brand-basement: #131226; /* The floor of the page. */

    /* 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.125rem;
    --brand-radius-sm: 0.1875rem;
    --brand-radius-md: 0.25rem;
    --brand-radius-lg: 0.375rem;
    --brand-radius-xl: 0.5625rem;
    --brand-radius-2xl: 0.75rem;
    --brand-radius-3xl: 1rem;
    --brand-radius-4xl: 1.25rem;
    --brand-radius-pill: 1.5rem;

    /* Depth. The only shadow on the site. "none" on the machine side, on purpose. */
    --brand-depth: inset 0 1px 0 color-mix(in oklab, #ffffff 7%, transparent);

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