/*
 * Design tokens.
 *
 * Every colour, border, font and metric the app uses is declared here as a
 * custom property. Nothing further down the cascade hard-codes a hex value, so
 * a complete retheme is possible by overriding this block alone:
 *
 *   .profile-page { --ms-module-header-bg: #2d0b3a; --ms-link: #ff77cc; }
 *
 * Palette is the classic 2003-2007 MySpace default: navy chrome, cornflower
 * module headers, peach blurb bars, and Verdana at a size that would horrify a
 * modern accessibility audit.
 */

:root {
  /* ----------------------------------------------------------- typography */
  --ms-font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
  --ms-font-family-heading: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
  --ms-font-family-mono: 'Courier New', Courier, monospace;

  /** Chrome text: nav bars, table labels, captions. */
  --ms-font-size: 11px;
  /** Prose: bios, blog entries, comments. */
  --ms-font-size-content: 12px;
  --ms-font-size-small: 10px;
  --ms-font-size-heading: 14px;
  --ms-font-size-title: 20px;
  --ms-line-height: 1.4;

  /* --------------------------------------------------------------- colour */
  --ms-page-bg: #ffffff;
  --ms-page-fg: #000000;
  --ms-canvas-bg: #e5e5e5;

  --ms-link: #003399;
  --ms-link-visited: #003399;
  --ms-link-hover: #0055cc;
  --ms-link-decoration: none;
  --ms-link-decoration-hover: underline;

  /** The navy band across the top and the primary nav strip. */
  --ms-chrome-bg: #003399;
  --ms-chrome-fg: #ffffff;
  --ms-chrome-link: #ffffff;
  --ms-chrome-border: #000000;

  /** The secondary (lighter) nav row. */
  --ms-nav-bg: #6699cc;
  --ms-nav-fg: #ffffff;
  --ms-nav-link: #ffffff;
  --ms-nav-active-bg: #ff9900;
  --ms-nav-active-fg: #ffffff;
  --ms-nav-separator: rgba(255, 255, 255, 0.55);

  /* ------------------------------------------------------------- modules */
  /* The bordered boxes: "Contacting Tom", "Tom's Interests", "My Mail". */
  --ms-module-bg: #ffffff;
  --ms-module-border: #6699cc;
  --ms-module-border-width: 1px;
  --ms-module-radius: 0;
  --ms-module-header-bg: #6699cc;
  --ms-module-header-fg: #ffffff;
  --ms-module-header-font-size: 11px;
  --ms-module-header-weight: 700;
  --ms-module-header-padding: 3px 6px;
  --ms-module-body-padding: 6px;
  --ms-module-gap: 10px;

  /* The peach "…'s Blurbs" / "…'s Friend Space" bars in the main column. */
  --ms-band-bg: #ffcc99;
  --ms-band-fg: #ff6600;
  --ms-band-border: #ff9933;
  --ms-band-padding: 3px 8px;

  /** Section headings inside blurbs: "About me:", "Who I'd like to meet:". */
  --ms-heading-fg: #ff6600;

  /* --------------------------------------------------------------- tables */
  --ms-table-border: #6699cc;
  --ms-table-label-bg: #b3c7e6;
  --ms-table-label-fg: #000000;
  --ms-table-value-bg: #ffffff;
  --ms-table-value-fg: #000000;
  --ms-table-cell-padding: 4px 6px;
  --ms-table-stripe-bg: #f2f5fa;

  /* --------------------------------------------------------------- forms */
  --ms-input-bg: #ffffff;
  --ms-input-fg: #000000;
  --ms-input-border: #7f9db9;
  --ms-button-bg: linear-gradient(#ffffff, #e3e3e3);
  --ms-button-fg: #000000;
  --ms-button-border: #999999;
  --ms-button-active-bg: #d4d4d4;
  --ms-focus-ring: #ff6600;

  /* -------------------------------------------------------------- status */
  --ms-muted-fg: #666666;
  --ms-online-fg: #cc6600;
  --ms-error-bg: #ffeeee;
  --ms-error-border: #cc0000;
  --ms-error-fg: #990000;
  --ms-notice-bg: #ffffcc;
  --ms-notice-border: #e6c200;
  --ms-highlight-bg: #ffffcc;
  /** 4chan's traditional quote colour, used by opt-in Greentexting. */
  --ms-greentext: #789922;

  /* -------------------------------------------------------------- layout */
  --ms-page-width: 800px;
  --ms-page-width-wide: 990px;
  --ms-column-left-width: 300px;
  --ms-column-gap: 10px;
  --ms-page-padding: 8px;

  /* Height of the mark in the header lockup; width follows its 3100:2120 ratio. */
  --ms-logo-height: 34px;

  /*
   * The mark ships as solid navy on transparent, so it is knocked out to white
   * to sit on the chrome band. Set this to `none` if you theme the band to a
   * light colour and want the artwork's own navy back.
   */
  --ms-logo-filter: brightness(0) invert(1);

  /* -------------------------------------------------------------- avatars */
  --ms-avatar-size: 42px;
  --ms-avatar-size-large: 190px;
  --ms-avatar-size-friend: 74px;
  --ms-avatar-border: #999999;
  --ms-avatar-radius: 0;

  /* --------------------------------------------------------------- misc */
  --ms-hr-color: #cccccc;
  --ms-emoji-size: 1.1em;
  --ms-transition: none;
}