Why are variables & CSS loaded in the overlay? This seems really weird to me and makes no sense.

I'm using a custom theme, with Seven as the administration theme (inside the overlay).
Why on earth are variables such as $base_url loaded in the overlay (and produce errors) when I only called them in my page--front.tpl.php (in my custom theme)? The same goes for the CSS; it is messing up the admin theme.

I even renamed my style.css and used drupal_add_css() to call it, but the result is the same.
I don't get why the administrative theme is looking at my custom theme files.

Surely I don't need to add arguments to all the variables, and make my CSS calls more specific, or do I?
There is a misunderstanding on how the Overlay module works.
Suppose you are watching your front page, and you click on a link that opens the overlay. What Drupal will do in that case is:


render the front page using the theme you have set
render the overlay using the administrative theme you have set


The overlay is rendered as iframe using the Drupal.overlay.create() function defined in a JavaScript file used from the Overlay module.

/**
 * Create the underlying markup and behaviors for the overlay.
 */
Drupal.overlay.create = function () {
  this.$container = $(Drupal.theme('overlayContainer'))
    .appendTo(document.body);

  // Overlay uses transparent iframes that cover the full parent window.
  // When the overlay is open the scrollbar of the parent window is hidden.
  // Because some browsers show a white iframe background for a short moment
  // while loading a page into an iframe, overlay uses two iframes. By loading
  // the page in a hidden (inactive) iframe the user doesn't see the white
  // background. When the page is loaded the active and inactive iframes
  // are switched.
  this.activeFrame = this.$iframeA = $(Drupal.theme('overlayElement'))
    .appendTo(this.$container);

  this.inactiveFrame = this.$iframeB = $(Drupal.theme('overlayElement'))
    .appendTo(this.$container);

  this.$iframeA.bind('load.drupal-overlay', { self: this.$iframeA[0], sibling: this.$iframeB }, $.proxy(this, 'loadChild'));
  this.$iframeB.bind('load.drupal-overlay', { self: this.$iframeB[0], sibling: this.$iframeA }, $.proxy(this, 'loadChild'));

  // …
}

/**
 * Theme function to create the overlay iframe element.
 */
Drupal.theme.prototype.overlayContainer = function () {
  return '&lt;div id="overlay-container"&gt;&lt;div class="overlay-modal-background"&gt;&lt;/div&gt;&lt;/div&gt;';
};

/**
 * Theme function to create an overlay iframe element.
 */
Drupal.theme.prototype.overlayElement = function (url) {
  return '&lt;iframe class="overlay-element" frameborder="0" scrolling="auto" allowtransparency="true"&gt;&lt;/iframe&gt;';
};


About the error you are seeing, it is probably caused by the fact you are accessing the $base_url variable without defining it as global variable (using the global $base_url; line).
You should not need to use that variable to generating the URLs for your site, as Drupal has url() and l(); the first function is used to generate a URL, while the second one is used to generate an anchor link, such as &lt;a href="/node/1"&gt;Example link&lt;/a&gt;.