:root {
      --bg-dark: #1f1f1f;
      --surface-dark: #2c2c2c;
      --text-dark: #eaeaea;
      --muted-dark: #a9a9a9;
      --border-dark: #3a3a3a;

      --bg-light: #f9f9f9;
      --surface-light: #ffffff;
      --text-light: #1f1f1f;
      --muted-light: #555555;
      --border-light: #d0d0d0;

      /* A quiet surface for lines that were unread when the discussions page opened. It is a
         pair because every text colour of a theme is measured against every palette surface of
         that theme; these stay close to the ordinary card while keeping the narrowest readings
         above the contrast floor. */
      --unread-surface-dark: #242b32;
      --unread-surface-light: #f5f9ff;

      --accent: #4db6ff; /* matches tabs accent/selected */
      --accent-light: #007acc;

      /* the colour a refusal is written in, one per theme, and the pair is not decoration :
         the first is chosen for a near-black surface, and read on the white card the light
         theme draws it is a pale pink that a good many people cannot tell from grey. */
      --error-dark: #ff6b6b;
      --error-light: #c62828;

      /* the colour good news is written in, one per theme, and this pair exists for the same
         reason as the one above it. The class it feeds carried a single value for both themes -
         the keyword `green`, which is #008000 - and read in a browser on the dark theme's own
         surfaces that is 2.8 to 1 against the topbar and against the card. That is not a colour
         somebody chose badly, it is a sentence somebody has to lean in to read. The light value
         is that same colour written as a number, so nothing about the light theme moved when the
         pair was introduced ; the dark one is the pastel treatment its partner already uses and
         reads at 8.4 to 1 on the same two surfaces. */
      --success-dark: #6bdd85;
      --success-light: #008000;

      /* The two faces a message drawn as a box is painted on - one surface and one hairline, per
         kind and per theme. They are the same idea as the amber note further down and are declared
         apart from it because they say something else : a note warns about a design, these two
         answer what the visitor has just done, and the two are free to move apart.

         Four values per kind rather than two, for the reason every pair above has two : the dark
         surface is chosen against the near-black page and the light one against the white card.
         Read as text, the theme's own text colour reads 9.2 to 1 on the green dark surface and
         13.3 on the green light one, 11.1 and 12.6 on the two red ones. The hairlines are graphic
         elements, which is a 3 to 1 bar, and each clears it against the surface it encloses -
         3.3 and 3.1 for the greens, 3.3 and 3.6 for the reds. None of the four is the colour the
         matching sentence is written in, and that is deliberate rather than an oversight : #6bdd85
         reads 6.5 to 1 on its own dark surface, so a hairline drawn in it would carry more of the
         eye than the words it encloses. A border says where the box ends and nothing else. */
      --good-news-surface-dark: #1c4523;
      --good-news-surface-light: #d4edda;
      --good-news-edge-dark: #4f9d5d;
      --good-news-edge-light: #4a9159;
      --refusal-surface-dark: #521f1f;
      --refusal-surface-light: #f8d7da;
      --refusal-edge-dark: #c85c58;
      --refusal-edge-light: #c9453f;

      /* The colour a link is written in, one per theme, and this pair exists because the site had
         no link colour at all : nothing in any stylesheet said what a link should look like, so
         every link in a sentence was drawn in the browser's own blue. That is one value for both
         themes, chosen for a white page, and read in a browser it is 9.4 to 1 on the light theme's
         card and 1.5 to 1 on the dark theme's - the worst reading this site has ever produced, and
         it looks deliberate on whichever theme somebody happens to be developing on.
         Both values are the owner's own, chosen by looking at the two themes rather than derived.
         The dark one came from a site whose dark theme gets a great deal more use than this one's
         and reads 4.53 to 1 on the card and 5.35 to 1 on the page behind it - past the 4.5 that
         ordinary text has to reach, and past it by three hundredths on the card, which is worth
         knowing before anybody makes the card any lighter. The light one replaced the browser's
         own blue, which passed comfortably but is not a colour anybody picked ; this one reads
         5.0 to 1 on a white page, so the light theme kept its margin while stopping being an
         accident. */
      --link-dark: #648efc;
      --link-light: #0073be;

      /* A link somebody has already followed, per theme, and the pair is here rather than left to
         the browser for the same reason as the pair above : the browser's own visited colour is a
         dark purple chosen for a white page, and nothing about this site's dark card is consulted.
         The dark value is a muted purple that reads *below* its unvisited partner rather than above
         it, which is the way round that matters - a visited link should recede, and the value that
         stood here before was a paler blue than the unvisited one, so a followed name drew more
         attention than an unfollowed one. The light value is very nearly the body's own text
         colour, which is the same idea taken further : on a white page a followed link stops
         announcing itself at all. */
         The dark value is a lightened form of the muted purple that was asked for. The value as
         given, #6d4b8d, reads 2.02 to 1 on the card and 2.39 on the page - a followed link would
         have been harder to read than the neon blue that started all of this, in the other
         direction. Hue and saturation are kept exactly ; only lightness moved, by the smallest step
         that clears the floor, so it is the same colour and it can be read. */
      --link-visited-dark: #a588c0;
      --link-visited-light: #222222;

      /* A link under the pointer. This began as one value for both themes, since one was what was
         asked for, and it had to become a pair - which is worth writing down, because "one value,
         used twice" is normally the right instinct and here it cannot work at any value.
         The bright cyan reads 7.99 to 1 on the dark card and 1.75 to 1 on a white page. Darkening it
         far enough to clear the floor on white takes it to 3.09 on the card, so it fails on the other
         side instead : there is no single lightness of this hue that a reader can see on both a
         near-black card and a white page. A pair is not a stylistic preference here, it is the only
         arrangement that works.
         The bright value is kept exactly as chosen for the dark theme, where it is excellent. The
         light one is the same hue and saturation darkened to the smallest step that clears the floor
         on white. */
      --link-hover-dark: #64d0ff;
      --link-hover-light: #0079ae;

      /* The badge a gallery card wears over the corner of its picture when what waits at the other end
         of Get design is not the cutting instructions : red where the page it opens shows the diagram
         without them, orange where it asks to be bought. A free design carries no badge, so there is
         no third pair.

         These are the badge's SURFACE, and the pair under them is the words drawn on it. Two values
         each, for the reason every pair above has two - the bright one is chosen against the near
         black the dark theme draws and the dark one against the light theme's white page.

         Read as text now rather than as a graphic element, which is the 4.5 to 1 bar instead of 3,
         and the two surfaces are what the theme's own text colour is chosen against : near black on
         the bright pair reads 5.9 and 8.1 to 1, white on the dark pair reads 5.5 and 5.2. They are
         declared apart from the refusal pair, though the red is the same value today, because a badge
         on a card is not an error and the two are free to move apart. */
      --closed-design-badge-dark: #ff6b6b;
      --closed-design-badge-light: #c62828;
      --paid-design-badge-dark: #ffa14d;
      --paid-design-badge-light: #b25000;

      /* The words on that badge. One value per theme rather than one per design type : both surfaces
         a theme draws are the same kind of colour, so the same ink reads on either. */
      --design-badge-text-dark: #1f1f1f;
      --design-badge-text-light: #ffffff;

      /* The panel a design's own note is drawn on : one surface, one hairline and one icon colour per
         theme. A note warns about the design itself - which program mangles its geometry, what to open
         its file with - so it is drawn warm rather than on the comment panel's ordinary surface, and it
         is the only warm surface on this site.

         Six values rather than three, for the reason every pair above has two : the dark one is chosen
         against the near-black sheet the comment panel draws and the light one against that sheet's
         white. Read as text, the theme's own text colour reads 8.6 to 1 on the dark surface and 14.3
         to 1 on the light one ; the icon, which is a graphic element and so has a 3 to 1 bar, reads
         5.8 and 4.5.

         THE SITE'S LINK COLOUR IS DELIBERATELY NOT USED INSIDE THIS PANEL, and the rule that draws a
         link there says so : #648efc reads 3.3 to 1 on the dark surface here, against the 4.5 ordinary
         text has to reach. */
      --note-surface-dark: #553c0f;
      --note-surface-light: #ffeeba;
      --note-edge-dark: #a97b1f;
      --note-edge-light: #e6b422;
      --note-icon-dark: #ffb454;
      --note-icon-light: #b25000;
    }