/*
  Computers And Networks Corp - day colors.
  The old site's colors on the new layout. This file only changes colors;
  the layout and everything else stays in site.css.

  When it applies:
    - by itself when the visitor's phone or computer is set to a light look
    - always, or never, once the visitor has used the sun/moon button in the header
      (the choice is remembered on that device)
  The page's <head> and js/site.js switch it on and off. Nothing here needs changing for that.
*/

:root {
  --night: #c8d5dc;        /* page background: the old site's mist */
  --night-deep: #b6c8d1;   /* footer, form fields: the old site's deeper mist */
  --panel: #b6c8d1;        /* cards and bands */
  --panel-bright: #dbe5ea; /* key labels, highlighted band */
  --line: #9db2bd;
  --line-bright: #6f8792;
  --text: #393a3c;         /* the old body text */
  --text-quiet: #343637;
  --head: #000000;         /* the old headings */
  --glow: #161616;         /* buttons and links: the old site's black */
  --glow-bright: #333333;
  --on-glow: #f7f7f7;
  --mint: #161616;
  color-scheme: light;
}

/* The black top bar the old site had. */
.top-bar {
  background: #161616;
  color: #dbdbdb;
}

.top-bar a {
  color: #f7f7f7;
}

/* The home page video keeps its night colours, so the white logo and words stay readable on it. */
.hero {
  --night: #0f1230;
  --night-deep: #0a0c22;
  --line-bright: #3a428a;
  --text: #c5cbee;
  --head: #f3f5ff;
  --glow: #7c97ff;
  --glow-bright: #9bb0ff;
  --on-glow: #0b0d24;
  color: var(--text);
}

/* No glow by day: buttons, labels, check marks and step numbers are plain black outlines. */
.btn {
  box-shadow: none;
}

.hero .btn {
  box-shadow: 0 0 22px rgba(124, 151, 255, 0.45);
}

.btn--ghost,
.btn--ghost:hover,
.hero .btn--ghost {
  box-shadow: inset 0 0 0 2px var(--line-bright);
}

.btn--ghost:hover {
  box-shadow: inset 0 0 0 2px var(--glow);
}

.keys li {
  box-shadow: inset 0 0 0 1.5px #4d6470;
  color: #161616;
}

.band--glow {
  box-shadow: inset 0 0 0 2px var(--glow);
}

.checks li::before,
.steps li::before {
  box-shadow: inset 0 0 0 1.5px var(--glow);
}

.text-link {
  color: var(--glow);
}