/* valueverde status page — light theme (the only theme; see .upptimerc.yml).
 *
 * Colour values are sampled from the valueverde Style Sheet, not eyeballed —
 * the same tokens docs.valueverde.de and the portal are built from. Upstream's
 * theme files are a flat set of custom properties, which is a good seam:
 * branding the page is mapping our palette onto their names, not fighting
 * their CSS. Type, geometry and layout live in global.css; only colour lives
 * here.
 *
 * The canvas is the Style Sheet's off-white with white cards, so lime, teal and
 * the two highlight colours carry all the colour on the page. A status page is
 * read in a hurry, usually by someone who is already annoyed: colour is a
 * signal here, not decoration, and it is spent only where it means something.
 */
:root {
  /* -- Style Sheet: primary ------------------------------------------------ */
  --vv-teal: #105A5B;
  --vv-lime: #D3F89B;

  /* -- Style Sheet: secondary ---------------------------------------------- */
  --vv-green: #43B34F;
  --vv-green-tint: #E1FEA1;
  --vv-yellow: #FAE17A;
  --vv-yellow-tint: #FFFCD1;
  --vv-off-white: #F7F6F4;

  /* -- Style Sheet: tertiary ----------------------------------------------- */
  --vv-ink: #02012D;
  --vv-blue: #1B85FD;
  --vv-blue-tint: #DFEFFF;

  /* -- Style Sheet: highlight ---------------------------------------------- */
  --vv-positive: #43B34F;
  --vv-negative: #FF4E22;

  /* -- Style Sheet: neutrals, 50 through 1000 ------------------------------- */
  --vv-n-50:  #F8F8F8;
  --vv-n-100: #ECECEC;
  --vv-n-150: #E0E0E0;
  --vv-n-200: #D4D4D4;
  --vv-n-300: #BBBBBB;
  --vv-n-400: #A3A3A3;
  --vv-n-500: #8B8B8B;
  --vv-n-600: #727272;
  --vv-n-700: #5A5A5A;
  --vv-n-800: #424242;
  --vv-n-900: #292929;
  --vv-n-1000: #111111;

  /* Derived, so the alpha tints are declared once rather than inline. */
  --vv-text-muted: var(--vv-n-600);
  --vv-accent: var(--vv-teal);
  --vv-selection: rgb(16 90 91 / 0.20);
  --vv-ring-positive: rgb(67 179 79 / 0.20);
  --vv-ring-negative: rgb(255 78 34 / 0.20);
  --vv-ring-warning: rgb(250 225 122 / 0.45);
  --vv-negative-wash: rgb(255 78 34 / 0.04);
  --vv-negative-edge: rgb(255 78 34 / 0.32);

  /* -- Upstream's token names, mapped onto the above ----------------------- */
  --body-background-color: var(--vv-off-white);
  --body-text-color: var(--vv-ink);
  --card-background-color: #ffffff;
  --card-border-color: var(--vv-n-150);

  --nav-background-color: rgb(247 246 244 / 0.82);
  --nav-border-bottom-color: var(--vv-n-150);
  --nav-current-border-bottom-color: var(--vv-teal);

  /* Status. Green and the red-orange are the Style Sheet's own positive and
     negative; amber is the secondary yellow, which needs ink on it rather than
     white — it is the one status colour light enough to fail contrast. */
  --up-border-left-color: var(--vv-positive);
  --down-border-left-color: var(--vv-negative);
  --degraded-border-left-color: var(--vv-yellow);
  --down-background-color: var(--vv-negative-wash);

  --tag-color: #ffffff;
  --tag-up-background-color: var(--vv-positive);
  --tag-down-background-color: var(--vv-negative);
  --tag-degraded-background-color: var(--vv-yellow);

  --change-background-color: var(--vv-yellow-tint);

  --code-color: var(--vv-teal);
  --code-background-color: rgb(16 90 91 / 0.08);

  --submit-button-background-color: var(--vv-teal);
  --submit-button-border-color: var(--vv-teal);
  --submit-button-color: #ffffff;
  --error-button-background-color: var(--vv-teal);
  --error-button-border-color: var(--vv-teal);
  --error-button-color: #ffffff;

  --graph-opacity: 1;
  --graph-filter: none;
}

/* Amber is the one status whose background is light enough that white text on
   it fails contrast — it takes ink instead. */
.tag.degraded { color: var(--vv-ink) !important; }