/* Import order: layout first, then components, then page styles. */
@import url("/css/layout.css");
@import url("/css/bio.css");
@import url("/css/panel.css");
@import url("/css/monitor.css");
@import url("/css/pages.css");

/* Theme tokens */
:root {
  /* Base */
  --text-muted: hsl(0, 0%, 48%);
  --text-strong: hsl(0, 0%, 10%);
  --text-link: hsl(219, 60%, 44%);

  /* Panel */
  --panel-light: hsl(218, 68%, 69%);
  --panel-dark: hsl(233, 57%, 62%);

  /* Bio header / footer accent */
  --bio-light: hsl(214, 88%, 74%);
  --bio-base: hsl(214, 80%, 61%);
  --bio-dark: hsl(213, 79%, 46%);
  --bio-shadow: hsl(215, 82%, 33%);

  /* Bio content / separators */
  --bio-accent: hsl(32, 79%, 71%);

  /* Bio footer switches */
  --logoff: hsl(36, 69%, 53%);
  --shutdown: hsl(12, 61%, 50%);

  /* Monitor shell */
  --monitor-base: hsl(44, 18%, 76%);
  --monitor-light: hsl(53, 17%, 79%);

  /* Monitor bezel */
  --bezel-light: hsl(60, 19%, 88%);
  --bezel-dark: hsl(39, 15%, 43%);
  --bezel-base: hsl(41, 16%, 56%);

  /* Window chrome / lists */
  --container-header: hsl(216, 100%, 87%);
  --container-base: hsl(222, 67%, 90%);
}

/* Shared element defaults */
a {
  color: var(--text-link);
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
}

img {
  display: block;
}

iframe {
  display: block;
  border: 0;
  box-sizing: border-box;
}