/*
 * Humans Versus Robots: the palette, as declared.
 * https://humansversusrobots.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://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: #f3e9dd; /* The page itself. */
    --brand-surface: #fbf5ee; /* A card lifted off it. */
    --brand-ink: #1c1917; /* Anything worth reading. */
    --brand-muted: #78716c; /* Bylines, dates, counts. */
    --brand-line: #e0d3c1; /* Every border and rule. */
    --brand-glow: #d97706; /* The accent, in words. Tuned to be read against the canvas. */
    --brand-fill: #fbbf24; /* The accent, in shapes. Whatever sits on top carries the contrast. */
    --brand-on-fill: #1c1917; /* What is legible on the fill. */
    --brand-basement: #fefcf9; /* The floor of the page. */
    --brand-field: #ffffff; /* 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.25rem;
    --brand-radius-sm: 0.375rem;
    --brand-radius-md: 0.5rem;
    --brand-radius-lg: 0.75rem;
    --brand-radius-xl: 1.125rem;
    --brand-radius-2xl: 1.5rem;
    --brand-radius-3xl: 2rem;
    --brand-radius-4xl: 2.5rem;
    --brand-radius-pill: calc(infinity * 1px);

    /* Depth. The only shadow on the site. "none" on the machine side, on purpose. */
    --brand-depth: 0 1px 2px -1px color-mix(in oklab, #b8a184 34%, transparent), 0 4px 10px -6px color-mix(in oklab, #b8a184 28%, transparent);

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