/* themes.css: every colour value the results interface uses, gathered into one
   file so the seven themes can be read side by side and kept honest.

   How the layers fit together
   ---------------------------
   This file declares only RAW palette values: the grounds, the panel colours,
   the three levels of text ink, the chrome accent, and the colours the charts
   paint data with. styles.css then declares the DERIVED tokens that the rest of
   the stylesheets actually mention (--hairline, --bg, --surface, --accent and so
   on), each written as a var() reference into the raw values here. Nothing
   outside this file writes a literal colour, so switching theme is a matter of
   setting one attribute, data-theme, on the <html> element. themes.js does that.

   Why some tokens are given as three comma-separated numbers
   ---------------------------------------------------------
   A large number of rules need a colour at partial opacity: a hairline is the
   hairline colour at sixteen percent, a hover tint is the accent at eight
   percent. CSS cannot take a hex value and add an alpha to it in a way that
   works in every browser this interface is opened in, so each colour that is
   needed at partial opacity is ALSO declared as its three red, green and blue
   channel numbers, under a name ending in -rgb. A rule then writes
   rgba(var(--corona-rgb), 0.08). The hex form and the -rgb form of the same
   colour must be kept in step by hand; they are written on adjacent lines for
   that reason.

   Chrome colours against data colours
   -----------------------------------
   The house rule from the original Observatory theme is that orange and green
   belong to the DATA (the stripped twin and the control build) and are never
   used for a button, a link, a focus ring or a selected row. Every theme below
   respects it, taking its chrome accent from indigo, silver, plum, cyan,
   near-white or blue.

   Blue is the honest exception, and it is worth stating plainly rather than
   burying. Observatory's accent #5598e7 IS the sixth rung of the documentation
   ladder, its focus colour #9ec5f4 IS the third rung, and its button #2a78d6 IS
   the eighth. In the default theme a link, a focus ring and three of the eight
   documentation levels are the same three colours. That is inherited from the
   original palette and cannot be changed without changing what published charts
   mean, so it stays; but a reader who needs a chrome that never competes with
   the ladder should use Meridian, whose cyan is clear of every data colour, or
   Graphite, whose chrome has no hue at all. Daylight keeps the blue family for
   continuity and has the same overlap in milder form.

   Data colours vary by ground, not by theme
   -----------------------------------------
   A reader comparing two screenshots must be able to trust that the same
   documentation build is the same colour in both. So the data ramps do not
   change from one dark theme to the next: all four dark themes share one set,
   and the two light themes share a second set. The light set exists only
   because the pale end of a ramp designed for a black ground disappears
   completely on paper; the light set keeps the same hues and the same ordering
   and only moves the whole range darker so every rung stays visible.

   Contrast
   --------
   Every body-ink-on-panel pair below is at or above 14:1, every secondary ink
   at or above 8:1, every muted ink at or above 4.5:1, and every button label on
   its button ground at or above 4.5:1. The exception is the Observatory theme's
   primary button, white on #2a78d6 at 4.42:1, which is inherited unchanged from
   the original palette because #2a78d6 is simultaneously the darkest rung of the
   documentation-ladder data ramp and cannot be moved without changing what the
   charts mean. */

/* ------------------------------------------------------------------ */
/* Shared data colours: the four dark themes                          */
/* ------------------------------------------------------------------ */
:root,
:root[data-theme="observatory"],
:root[data-theme="graphite"],
:root[data-theme="nocturne"],
:root[data-theme="meridian"],
:root[data-theme="contrast"] {
  /* the documentation ladder, eight rungs from least to most documentation */
  --lap-1: #cde2fb; --lap-2: #b7d3f6; --lap-3: #9ec5f4; --lap-4: #86b6ef;
  --lap-5: #6da7ec; --lap-6: #5598e7; --lap-7: #3987e5; --lap-8: #2a78d6;
  --lap-1-rgb: 205,226,251;
  /* the same ladder in green, used by the three-dimensional plot */
  --ladder-g-1: #bfe8d1; --ladder-g-2: #a4ddbe; --ladder-g-3: #89d2ab; --ladder-g-4: #6dc698;
  --ladder-g-5: #52ba85; --ladder-g-6: #3aa971; --ladder-g-7: #278f5d; --ladder-g-8: #16764b;
  /* how many passes a cell needed before it succeeded, fewest to most */
  --pass-1: #cde2fb; --pass-2: #9ec5f4; --pass-3: #6da7ec;
  --pass-4: #3987e5; --pass-5: #2a78d6; --pass-6: #1d5aa8;
  /* the stripped twin and the no-documentation control */
  --str: #d95926; --str-rgb: 217,89,38;
  --non: #199e70; --non-rgb: 25,158,112;
  /* The same two conditions deepened enough to carry small white text, for the
     places where they are a filled band with a label inside rather than a mark
     on a chart. White on #d95926 is only 3.9 to 1 and on #199e70 only 3.4 to 1,
     which fails for a ten-pixel label; these reach 6.1 and 6.5. The charts keep
     the undeepened colours above, so no measurement changes appearance. */
  --str-fill: #a8420f;
  --non-fill: #0f6b4b;
  /* what the hidden check said about a cell */
  --outcome-pass: #0ca30c;
  --outcome-fail: #d03b3b;
  --outcome-unscored: #8f8e85;
  --outcome-excluded: #4a4a46;
  /* nine well-separated hues for whatever categorical dimension is on screen */
  --task-1: #3987e5; --task-2: #d95926; --task-3: #199e70;
  --task-4: #c98500; --task-5: #d55181; --task-6: #008300;
  --task-7: #9085e9; --task-8: #e66767; --task-9: #86b6ef;
  /* verdicts in the tables and badges */
  --good: #7ee27e;  --good-rgb: 126,226,126;  --good-solid-rgb: 12,163,12;
  --bad: #f09a9a;   --bad-rgb: 240,154,154;   --bad-solid-rgb: 208,59,59;
  --warn: #ffd479;  --warn-rgb: 255,212,121;  --warn-solid-rgb: 250,178,25;
  --danger: #f09a9a;
  /* a cell that was deliberately skipped */
  --skip: #c5abd9; --skip-2: #d8c0e8; --skip-solid: #9f77bb;
  --skip-rgb: 197,171,217; --skip-solid-rgb: 159,119,187;
  /* the badge for a registered cohort-comparison preset: a hypothesis that was
     written down and committed to before the data that tests it was
     collected (see Appendix I, "registered analysis"). Deliberately not
     good/bad/warn/skip, because a registered preset is neither a pass, a
     fail, an unscored cell, nor a skip; it is a procedural fact about when a
     comparison was decided, independent of what the comparison later shows. */
  --registered: #d9b64a; --registered-rgb: 217,182,74;
  --registered-solid-rgb: 168,132,10;
  /* The "read this before you trust the numbers" notice. Two colours, not one
     colour in two forms: a pale salmon for the text, and a more saturated
     salmon used only at low opacity for the border and the wash behind it,
     which would be too weak to see if it were the pale one. */
  --attn: #d8b4a8; --attn-edge-rgb: 220,115,105;
  /* nothing is known about this cell */
  --neutral: #8f8e85;
  /* the pale chip the timeline draws a finished cell on, and its text */
  --paper: #f6f5f0; --paper-ink: #1a2333; --paper-ink-rgb: 26,35,51;
  /* the low sun on the horizon of the decorative sky */
  --sun: #d3a66f;
  /* the hairline drawn around a plotted marker so that overlapping points stay
     separable: on a dark ground it is darker than anything it can sit on */
  --mark-edge: #1a1a19;
  /* a bar segment that stands for time nobody is accountable for: present, but
     not to be read as one of the coloured stages */
  --muted-fill: #454f66;
  /* ink that sits directly on a saturated data colour, such as the count printed
     inside a coloured band. White in every theme, because the data colours are
     chosen to be dark enough to carry it on both grounds. */
  --on-data: #ffffff; --on-data-dim: rgba(255,255,255,0.72);
  /* the three stops of the coverage and impact heat maps: a cell with nothing in
     it, then the lowest and highest counts */
  --heat-empty: #212120; --heat-lo: #104281; --heat-hi: #86b6ef;
  /* pure white, used for specular highlights and for ink on a coloured button */
  --specular: #ffffff; --specular-rgb: 255,255,255;
}

/* ------------------------------------------------------------------ */
/* Shared data colours: the two light themes                          */
/* ------------------------------------------------------------------ */
/* Same hues and same ordering as the dark set. The whole lightness range is
   moved down so that the pale end of each ramp, which vanishes on paper, still
   reads at roughly three to one against a white panel. */
:root[data-theme="daylight"],
:root[data-theme="vellum"] {
  --lap-1: #5f9ad8; --lap-2: #4f8bcd; --lap-3: #407cbe; --lap-4: #326cab;
  --lap-5: #265c93; --lap-6: #1b4c7b; --lap-7: #123c63; --lap-8: #0d2f52;
  --lap-1-rgb: 95,154,216;
  --ladder-g-1: #3fa87c; --ladder-g-2: #359a70; --ladder-g-3: #2c8b64; --ladder-g-4: #237c58;
  --ladder-g-5: #1b6d4c; --ladder-g-6: #145e41; --ladder-g-7: #0e4e35; --ladder-g-8: #093d27;
  --pass-1: #5f9ad8; --pass-2: #407cbe; --pass-3: #265c93;
  --pass-4: #1b4c7b; --pass-5: #123c63; --pass-6: #0d2f52;
  --str: #b4441a; --str-rgb: 180,68,26;
  --non: #12744f; --non-rgb: 18,116,79;
  --str-fill: #9c3d0e;
  --non-fill: #0d5c41;
  --outcome-pass: #0b7a34;
  --outcome-fail: #b32626;
  --outcome-unscored: #6f6e66;
  --outcome-excluded: #a9a8a0;
  --task-1: #2568b8; --task-2: #b4441a; --task-3: #12744f;
  --task-4: #8a5c00; --task-5: #a83a63; --task-6: #16651f;
  --task-7: #5a4bc4; --task-8: #b04141; --task-9: #4a86c9;
  --good: #0b7a34;  --good-rgb: 11,122,52;    --good-solid-rgb: 11,122,52;
  --bad: #a32020;   --bad-rgb: 163,32,32;     --bad-solid-rgb: 179,38,38;
  --warn: #8a5a00;  --warn-rgb: 138,90,0;     --warn-solid-rgb: 176,120,10;
  --danger: #a32020;
  /* A mulberry rather than a violet, so that it is not mistaken for Vellum's
     indigo controls; at #6b3f8f the two were closer than a reader can reliably
     separate. */
  --skip: #8a3a6b; --skip-2: #66294e; --skip-solid: #9c4479;
  --skip-rgb: 138,58,107; --skip-solid-rgb: 156,68,121;
  /* see the dark-theme block above for what this token is for */
  --registered: #8a6a10; --registered-rgb: 138,106,16;
  --registered-solid-rgb: 138,106,16;
  --attn: #8a4020; --attn-edge-rgb: 176,74,40;
  --neutral: #6f6e66;
  /* The chip that stands for "no condition, just a count". On the dark themes
     it is cream against dark bands; here it inverts, but it must not invert to
     navy, because the darkest documentation rung is already navy and the two
     sit side by side in the headline band strip. A warm near-black keeps them
     apart. */
  --paper: #4a4a46; --paper-ink: #f6f5f0; --paper-ink-rgb: 246,245,240;
  --sun: #8a5a2a;
  /* "Specular" means the brightest mark the interface can put on the ground it
     draws the three-dimensional plot against. On a black sky that is white; on
     paper white would be invisible, so on the light themes it is near-black. */
  /* On paper the separating hairline round a marker has to be lighter, not
     darker, than anything it can sit on, and the heat map has to run from pale
     to dark rather than from dark to bright. */
  --mark-edge: #ffffff;
  --muted-fill: #97a1b6;
  --on-data: #ffffff; --on-data-dim: rgba(255,255,255,0.78);
  --heat-empty: #e7e8ec; --heat-lo: #dbe7f6; --heat-hi: #123f6b;
  --specular: #1b2436; --specular-rgb: 27,36,54;
}

/* ================================================================== */
/* 1. Observatory                                                      */
/*    The original theme, and still the default. A night-blue bench    */
/*    instrument read in long evening sessions: the sky is the light   */
/*    source and every control recedes into blue chrome.               */
/* ================================================================== */
:root,
:root[data-theme="observatory"] {
  color-scheme: dark;
  --sky-0: #05070d;
  --sky-1: #0b1226;
  --sky-2: #101a36;
  --panel: #0e1730;
  --panel-2: #142042;
  /* The glass form is a few units off the solid panel by design: a translucent
     panel over the night ground needs slightly more blue in it to land on the
     same colour as the solid one. */
  --panel-rgb: 13,24,52;
  --panel-glass-alpha: 0.62;
  --well-rgb: 5,7,13;
  --well-alpha: 0.55;
  --shadow-rgb: 0,0,0;
  --hair-rgb: 158,197,244;
  --hair-alpha: 0.16;
  --hair-2-alpha: 0.32;
  --ink: #dfe6f4;   --ink-rgb: 223,230,244;
  --ink-2: #a9b6d1; --ink-2-rgb: 169,182,209;
  --ink-3: #7f8aa6; --ink-3-rgb: 127,138,166;
  --ink-bright-rgb: 234,243,255;
  --corona: #5598e7;   --corona-rgb: 85,152,231;
  --corona-2: #9ec5f4;
  --btn: #2a78d6; --btn-rgb: 42,120,214;
  --accent-ink: #ffffff;
}

/* ================================================================== */
/* 2. Daylight                                                         */
/*    The theme for a room with the blinds open. A cool paper ground,  */
/*    never pure white, so a screen full of panels does not glare; the */
/*    same corona blue as Observatory, darkened until it carries text  */
/*    on paper. Use this one during the day.                           */
/* ================================================================== */
:root[data-theme="daylight"] {
  color-scheme: light;
  --sky-0: #eef1f6;
  --sky-1: #f8fafd;
  --sky-2: #e2e7f0;
  --panel: #ffffff;
  --panel-2: #f3f6fb;
  --panel-rgb: 255,255,255;
  --panel-glass-alpha: 0.86;
  --well-rgb: 19,27,44;
  --well-alpha: 0.055;
  --shadow-rgb: 19,27,44;
  --hair-rgb: 26,44,84;
  --hair-alpha: 0.14;
  --hair-2-alpha: 0.30;
  --ink: #131b2c;   --ink-rgb: 19,27,44;
  --ink-2: #3f4c66; --ink-2-rgb: 63,76,102;
  --ink-3: #5b6880; --ink-3-rgb: 91,104,128;
  --ink-bright-rgb: 8,13,24;
  --corona: #1a63c4;   --corona-rgb: 26,99,196;
  --corona-2: #0f4894;
  --btn: #17549f; --btn-rgb: 23,84,159;
  --accent-ink: #ffffff;
}

/* ================================================================== */
/* 3. Vellum                                                           */
/*    A second light theme, but a warm one: a cream ground with almost */
/*    no blue in it, for the long stretches spent reading prose rather */
/*    than watching a batch run. Its accent is indigo, because the     */
/*    warm hues on a cream page all belong to the data.                */
/* ================================================================== */
:root[data-theme="vellum"] {
  color-scheme: light;
  --sky-0: #efe7d6;
  --sky-1: #f7f1e4;
  --sky-2: #e4dbc7;
  --panel: #fdfaf3;
  --panel-2: #f2ecdf;
  --panel-rgb: 253,250,243;
  --panel-glass-alpha: 0.86;
  --well-rgb: 60,45,25;
  --well-alpha: 0.07;
  --shadow-rgb: 60,45,25;
  --hair-rgb: 92,72,44;
  --hair-alpha: 0.18;
  --hair-2-alpha: 0.34;
  --ink: #241d13;   --ink-rgb: 36,29,19;
  --ink-2: #4e4433; --ink-2-rgb: 78,68,51;
  --ink-3: #665c4c; --ink-3-rgb: 102,92,76;
  --ink-bright-rgb: 20,15,8;
  --corona: #4a3fa0;   --corona-rgb: 74,63,160;
  --corona-2: #362c80;
  --btn: #3f3590; --btn-rgb: 63,53,144;
  --accent-ink: #ffffff;
}

/* ================================================================== */
/* 4. Graphite                                                         */
/*    A dark theme with no hue at all in the chrome. Taking the house  */
/*    rule to its limit: if colour belongs to the data, then the       */
/*    controls should have none, so the accent here is silver and the  */
/*    primary button is a light key with dark ink. Charts read louder  */
/*    against it than against any of the coloured grounds.             */
/* ================================================================== */
:root[data-theme="graphite"] {
  color-scheme: dark;
  --sky-0: #0c0c0d;
  --sky-1: #151517;
  --sky-2: #1c1c1f;
  --panel: #151517;
  --panel-2: #202024;
  --panel-rgb: 21,21,23;
  --panel-glass-alpha: 0.66;
  --well-rgb: 0,0,0;
  --well-alpha: 0.45;
  --shadow-rgb: 0,0,0;
  --hair-rgb: 200,202,210;
  --hair-alpha: 0.15;
  --hair-2-alpha: 0.30;
  --ink: #eaeaee;   --ink-rgb: 234,234,238;
  --ink-2: #a3a3ab; --ink-2-rgb: 163,163,171;
  --ink-3: #8d8d97; --ink-3-rgb: 141,141,151;
  --ink-bright-rgb: 250,250,252;
  /* Brighter than the body ink rather than merely a different grey, because in
     a theme with no hue in the chrome the only thing an accent can be is
     lighter. At #b9bfca it was within a hair of the secondary text and an
     accented word inside a paragraph was invisible as an accent. */
  --corona: #d6dbe6;   --corona-rgb: 214,219,230;
  --corona-2: #f2f5fa;
  --btn: #cdd3dd; --btn-rgb: 205,211,221;
  --accent-ink: #101012;
}

/* ================================================================== */
/* 5. Nocturne                                                         */
/*    For the hours when the room is dark and the screen should not be */
/*    throwing blue light. The ground is a warm umber-black and the    */
/*    ink is warm off-white; the accent is plum, chosen because it is  */
/*    the one emphatic hue that no data series has already taken and   */
/*    that cannot be confused with the stripped twin's orange.         */
/* ================================================================== */
:root[data-theme="nocturne"] {
  color-scheme: dark;
  --sky-0: #0d0906;
  --sky-1: #1a1109;
  --sky-2: #241810;
  --panel: #17100a;
  --panel-2: #22180f;
  --panel-rgb: 23,16,10;
  --panel-glass-alpha: 0.68;
  --well-rgb: 8,4,2;
  --well-alpha: 0.55;
  --shadow-rgb: 0,0,0;
  --hair-rgb: 244,214,170;
  --hair-alpha: 0.16;
  --hair-2-alpha: 0.32;
  --ink: #f4e9dc;   --ink-rgb: 244,233,220;
  --ink-2: #cfbca5; --ink-2-rgb: 207,188,165;
  --ink-3: #9a8974; --ink-3-rgb: 154,137,116;
  --ink-bright-rgb: 255,247,238;
  --corona: #d97cae;   --corona-rgb: 217,124,174;
  --corona-2: #f0a9cc;
  --btn: #a33a6e; --btn-rgb: 163,58,110;
  --accent-ink: #ffffff;
}

/* ================================================================== */
/* 6. Meridian                                                         */
/*    A colder night than Observatory. The ground is a deep teal-slate */
/*    and the accent is cyan, which sits far enough from the ladder's  */
/*    blues to stay legible as chrome. Suits sessions spent mostly in  */
/*    the timing views, where the charts are largely blue and a blue   */
/*    chrome competes with them.                                       */
/* ================================================================== */
:root[data-theme="meridian"] {
  color-scheme: dark;
  --sky-0: #040c0e;
  --sky-1: #06181d;
  --sky-2: #0a2229;
  --panel: #072028;
  --panel-2: #0d2d38;
  --panel-rgb: 7,32,40;
  --panel-glass-alpha: 0.64;
  --well-rgb: 2,8,10;
  --well-alpha: 0.55;
  --shadow-rgb: 0,0,0;
  --hair-rgb: 150,215,226;
  --hair-alpha: 0.16;
  --hair-2-alpha: 0.32;
  --ink: #dcf0f2;   --ink-rgb: 220,240,242;
  --ink-2: #a2c3c9; --ink-2-rgb: 162,195,201;
  --ink-3: #7b9ca3; --ink-3-rgb: 123,156,163;
  --ink-bright-rgb: 235,250,252;
  --corona: #35b6c9;   --corona-rgb: 53,182,201;
  --corona-2: #8fdde9;
  --btn: #2ba2bd; --btn-rgb: 43,162,189;
  --accent-ink: #04181d;
}

/* ================================================================== */
/* 7. Contrast                                                         */
/*    The accessibility theme. A true black ground, white body ink,    */
/*    hairlines pushed from a suggestion to a visible rule, and every  */
/*    accent taken to at least ten to one. Nothing here relies on a    */
/*    faint tint to carry meaning.                                     */
/* ================================================================== */
:root[data-theme="contrast"] {
  color-scheme: dark;
  --sky-0: #000000;
  --sky-1: #000000;
  --sky-2: #0d0d0d;
  --panel: #0a0a0a;
  --panel-2: #171717;
  --panel-rgb: 10,10,10;
  --panel-glass-alpha: 0.92;
  --well-rgb: 0,0,0;
  --well-alpha: 0.7;
  --shadow-rgb: 0,0,0;
  --hair-rgb: 235,240,255;
  --hair-alpha: 0.38;
  --hair-2-alpha: 0.70;
  --ink: #ffffff;   --ink-rgb: 255,255,255;
  --ink-2: #e0e0e0; --ink-2-rgb: 224,224,224;
  --ink-3: #b8b8b8; --ink-3-rgb: 184,184,184;
  --ink-bright-rgb: 255,255,255;
  /* Near-white rather than pale blue. A pale blue accent cannot be told apart
     from the pale rungs of the documentation ladder, which is the one confusion
     this theme least affords; and near-white on black is the highest contrast
     any accent can reach. The key button is a bright blue with near-black ink,
     which puts the button body at 5.7 to 1 against the panel where the previous
     dark blue managed 2.4 and so failed the rule for a control's own outline. */
  --corona: #eef2f8;   --corona-rgb: 238,242,248;
  --corona-2: #ffffff;
  --btn: #3d8ce0; --btn-rgb: 61,140,224;
  --accent-ink: #06121e;
}

/* The maximum-contrast theme also brightens the verdict and data colours,
   because the muted versions used elsewhere are the one thing a reader who
   needs this theme cannot see. */
:root[data-theme="contrast"] {
  --good: #79ff79;  --good-rgb: 121,255,121;  --good-solid-rgb: 40,200,40;
  --bad: #ff9c9c;   --bad-rgb: 255,156,156;   --bad-solid-rgb: 235,70,70;
  --warn: #ffdf8a;  --warn-rgb: 255,223,138;  --warn-solid-rgb: 255,190,40;
  --danger: #ff9c9c;
  --neutral: #b0afa6;
  --outcome-unscored: #b0afa6;
  --outcome-excluded: #8a8981;
  --outcome-fail: #ff6b6b;
  /* The bottom of each shared ramp is under three to one on a black ground, so
     this theme lifts the floor. The ordering and the hues are unchanged; only
     the darkest rungs move, which is what a reader of this theme needs. */
  --lap-8: #3d8ce0;
  --ladder-g-8: #2ea36c;
  --pass-6: #3d8ce0;
  --heat-lo: #3570aa;
  --muted-fill: #6b7893;
}