From d414138a7c7cee401afd23d047a90d75b126951c Mon Sep 17 00:00:00 2001
From: Amri Toufali <amri@handsomemedia.com>
Date: Thu, 5 Dec 2024 16:16:04 -0800
Subject: [PATCH] OBS-389: replace transpile hard-code LESS vars with CSS
 custom properties

---
 .../api/static/api/css/documentation.css      |   6 +-
 .../crashstats/static/crashstats/css/base.css | 537 ++++++++++++++----
 .../static/crashstats/css/base/forms.css      |   6 +-
 .../static/crashstats/css/base/layout.css     | 100 +++-
 .../static/crashstats/css/base/reset.css      |   4 +-
 .../static/crashstats/css/base/tables.css     |  16 +-
 .../static/crashstats/css/base/variables.css  |  35 ++
 .../crashstats/css/components/accordion.css   |  30 +-
 .../crashstats/css/components/admin.css       |   6 +-
 .../crashstats/css/components/bugzilla.css    |   2 +-
 .../static/crashstats/css/components/code.css |   2 +-
 .../crashstats/css/components/footer.css      |  19 +-
 .../crashstats/css/components/message.css     |  22 +-
 .../static/crashstats/css/components/nav.css  |  36 +-
 .../static/crashstats/css/components/note.css |  11 +-
 .../crashstats/css/components/panel.css       |  74 ++-
 .../crashstats/css/components/select.css      |  12 +-
 .../crashstats/css/components/simplebox.css   |   2 +-
 .../crashstats/css/components/sumo_link.css   |   4 +-
 .../css/components/table_sorter.css           |  12 +-
 .../crashstats/css/pages/product_home.css     |   8 +-
 .../crashstats/css/pages/report_index.css     |  12 +-
 .../crashstats/css/pages/report_pending.css   |   4 +-
 .../static/jsonview/jsonview.custom.css       |  17 +-
 .../documentation/css/documentation.css       | 103 +++-
 webapp/crashstats/settings/bundles.py         |   2 +-
 .../static/signature/css/signature_report.css |  65 ++-
 .../status/static/status/css/status.css       |   8 +-
 .../static/supersearch/css/search.css         |  75 ++-
 .../tokens/static/tokens/css/home.css         |  22 +-
 .../static/topcrashers/css/topcrashers.css    |  55 +-
 31 files changed, 964 insertions(+), 343 deletions(-)
 create mode 100644 webapp/crashstats/crashstats/static/crashstats/css/base/variables.css

diff --git a/webapp/crashstats/api/static/api/css/documentation.css b/webapp/crashstats/api/static/api/css/documentation.css
index cb3de55897..3f829b43fe 100644
--- a/webapp/crashstats/api/static/api/css/documentation.css
+++ b/webapp/crashstats/api/static/api/css/documentation.css
@@ -20,7 +20,7 @@ a.expand-list {
   padding: 3px;
 }
 input.error {
-  border: 2px solid #d70022;
+  border: 2px solid var(--red);
 }
 /* things that are hidden by default */
 div.test-drive,
@@ -31,7 +31,7 @@ img.loading-ajax,
   display: none;
 }
 .status-error {
-  color: #d70022;
+  color: var(--red);
   font-weight: bold;
 }
 p.helptext {
@@ -52,7 +52,7 @@ form.testdrive td ul li {
 }
 .deprecation-warning {
   font-weight: bold;
-  color: #ff9400;
+  color: var(--orange);
 }
 p.deprecation-warning {
   text-transform: uppercase;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base.css b/webapp/crashstats/crashstats/static/crashstats/css/base.css
index 3b5bd8756d..9792419c44 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/base.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base.css
@@ -3,6 +3,7 @@ django-pipeline collectstatic is unable to process CSS @import rules.
 This means that @import-ed files won't be copied to STATIC_ROOT automatically.
 The styles below are copy/pasted from imports defined in `base.less`, in lieu of using native @import.
 This is temporary – when we introduce a capable build tool, we should delete the styles below and revert to @import.
+Use `base.less` as a reference for @imports (relying on git history in case the file was deleted).
 */
 
 /*************************** Begin imported styles ******************************/
@@ -11,10 +12,12 @@ This is temporary – when we introduce a capable build tool, we should delete t
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+
 html {
   background: #ffffff;
-  color: #0f1126;
+  color: var(--black);
 }
+
 body,
 div,
 dl,
@@ -44,6 +47,7 @@ figure {
   margin: 0;
   padding: 0;
 }
+
 /**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
@@ -52,14 +56,17 @@ a:hover,
 a:focus {
   outline: 0;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
 fieldset,
 img {
   border: 0;
 }
+
 address,
 caption,
 cite,
@@ -73,14 +80,17 @@ var {
   font-style: normal;
   font-weight: normal;
 }
+
 ul,
 ol {
   list-style: none;
 }
+
 caption,
 th {
   text-align: left;
 }
+
 h1,
 h2,
 h3,
@@ -90,21 +100,26 @@ h6 {
   font-size: 100%;
   font-weight: normal;
 }
+
 q:before,
 q:after {
   content: '';
 }
+
 abbr,
 acronym {
   border: 0;
   font-variant: normal;
 }
+
 sup {
   vertical-align: text-top;
 }
+
 sub {
   vertical-align: text-bottom;
 }
+
 input,
 textarea,
 select {
@@ -113,26 +128,30 @@ select {
   font-weight: inherit;
   font-size: 100%;
 }
+
 legend {
-  color: #0f1126;
+  color: var(--black);
 }
+
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 /* Django forms in general */
 ul.errorlist li {
-  color: #d70022;
+  color: var(--red);
 }
+
 input[type="submit"],
 input[type="button"],
 button {
-  background-color: #0060df;
+  background-color: var(--primary);
   padding: 0.8em;
   border: none;
   border-radius: 2px;
   cursor: pointer;
 }
+
 input[type="submit"],
 input[type="button"],
 button,
@@ -142,6 +161,7 @@ button a {
   color: #ffffff;
   text-decoration: none;
 }
+
 input[type="submit"]:hover,
 input[type="button"]:hover,
 button:hover,
@@ -150,93 +170,116 @@ input[type="button"]:focus,
 button:focus {
   background: #003eaa;
 }
+
 input[type="submit"]:active,
 input[type="button"]:active,
 button:active {
-  background: #002275;
+  background: var(--primary-dark);
 }
+
 table {
   /* standard table styles for data tables */
 }
+
 table thead tr,
 table tbody tr {
   z-index: 50;
 }
+
 table thead tr th,
 table tbody tr th {
-  border: 1px solid #0f1126;
+  border: 1px solid var(--black);
 }
+
 table thead tr td,
 table tbody tr td {
-  border: solid 1px #b1b1b3;
+  border: solid 1px var(--grey);
 }
+
 table th {
   font-weight: bold;
   padding: 0 0.25em;
 }
+
 table th a.expand {
   display: inline;
   font-size: smaller;
 }
+
 table.data-table,
 table.zebra {
   width: 100%;
 }
+
 table.data-table tr:nth-child(even),
 table.zebra tr:nth-child(even) {
-  background-color: rgba(12, 12, 13, 0.1);
+  background-color: var(--alpha-grey1);
 }
+
 table.data-table tr:nth-child(odd),
 table.zebra tr:nth-child(odd) {
   background-color: rgba(12, 12, 13, 0.025);
 }
+
 table.data-table tr:hover,
 table.zebra tr:hover {
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
 }
+
 table th {
-  background-color: rgba(12, 12, 13, 0.2);
+  background-color: var(--alpha-grey2);
 }
+
 table th,
 table td {
   padding: 0.5em;
 }
+
 table tbody {
   background-color: #ffffff;
 }
+
 table tbody tr.truncated-frame {
-  background-color: #fcb35f;
+  background-color: var(--jsonview-prop);
 }
+
 table tbody tr.truncated-frame a {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 table tbody tr.missingsymbols,
 table tbody tr.missingsymbols:hover,
 table tbody tr.missingsymbols td {
-  background-color: #d70022;
+  background-color: var(--red);
   color: #ffffff;
   border-top: 2px solid #ffffff;
 }
+
 table.hardwrapped td {
   overflow-wrap: anywhere;
 }
+
 .tablesorter {
   margin: 0 !important;
 }
+
 .tablesorter thead {
   font-size: 0.9rem;
 }
+
 @font-face {
   font-family: 'icons';
   src: url('/static/crashstats/fonts/icons.eot?#iefix2013') format('embedded-opentype'), url('/static/crashstats/fonts/icons.woff?2013') format('woff'), url('/static/crashstats/fonts/icons.ttf?2013') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
+
 html,
 body {
   font-weight: 300;
   letter-spacing: 0.01em;
 }
+
 h1,
 h2,
 h3,
@@ -248,92 +291,114 @@ h6 {
   line-height: 1.25em;
   margin-bottom: 0.5em;
 }
+
 h1 {
   font-size: 33px;
 }
+
 h2 {
   font-size: 33px;
 }
+
 h3 {
   font-size: 24px;
   margin: 1em 0;
 }
+
 h4 {
   font-size: 18px;
   font-weight: 500;
   margin: 0 0 0.7em 0;
 }
+
 p {
   margin: 1em 0 1em 0;
   font-weight: normal;
 }
+
 em {
   font-style: italic;
 }
+
 strong,
 b {
   font-weight: bold;
 }
+
 .list-disc {
   list-style-type: disc;
 }
+
 .list-inside {
   list-style-position: inside;
 }
+
 html {
-  background: #f2f6f9;
-  color: #4a4a4f;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-  line-height: 1.7;
+  background: var(--off-white);
+  color: var(--dark-grey);
+  font-family: var(--base-font);
+  font-size: var(--base-font-size);
+  line-height: var(--base-line-height);
   margin: 0;
   padding: 0;
 }
+
 html.production {
   margin: 0;
 }
-html.production body > h1 {
+
+html.production body>h1 {
   display: none;
 }
+
 html.production .page-heading {
   margin: 1em 1em 1em;
   display: flex;
   align-items: center;
 }
+
 html.production .page-heading h2 {
   flex: auto;
   font-size: 1.6em;
   margin: 0;
 }
+
 html.production .page-heading nav {
   flex: initial;
   flex-shrink: 0;
 }
+
 html.production .panel {
   margin: 1em;
 }
+
 body {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }
+
 .page-header {
   position: relative;
   min-height: 64px;
   height: 64px;
-  background-color: #002275;
+  background-color: var(--primary-dark);
   display: flex;
   align-items: center;
 }
-.page-header > * {
+
+.page-header>* {
   margin: 0 0.5em;
 }
-.page-header > *:first-child {
+
+.page-header>*:first-child {
   margin-left: 0;
 }
-.page-header > *:last-child {
+
+.page-header>*:last-child {
   margin-right: 0;
 }
+
 .page-header .title {
   flex: 1;
   border: none;
@@ -347,26 +412,31 @@ body {
   padding-left: 0.5em;
   line-height: 64px;
 }
+
 .page-header #simple_search {
   flex: 0 0 auto;
 }
+
 .page-header #simple_search label {
   color: #ffffff;
 }
+
 .page-header #simple_search input {
   background: #ffffff url("/static/img/2.0/search.png") no-repeat 5px center;
   border: none;
   width: 212px;
   padding: 3px 4px 4px 28px;
-  font-size: 12px;
-  color: #4a4a4f;
+  font-size: var(--base-font-size);
+  color: var(--dark-grey);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
+
 .page-header #simple_search input:-moz-placeholder {
-  color: #d7d7db;
+  color: var(--light-grey);
 }
+
 .page-header .user-info {
   flex: 0 0 auto;
   height: 100%;
@@ -374,14 +444,17 @@ body {
   align-items: center;
   font-size: 14px;
 }
+
 .page-header .user-info .signup-link {
-  color: #f2f6f9;
+  color: var(--off-white);
   padding: 0 1em;
 }
+
 .page-header .user-info .login-link {
-  color: #f2f6f9;
+  color: var(--off-white);
   padding: 0 1em;
 }
+
 .page-header .user-info .user-info-button {
   background: transparent;
   border: none;
@@ -393,75 +466,91 @@ body {
   position: relative;
   padding: 0 1em;
 }
+
 .page-header .user-info .user-info-button .user-email {
   margin-right: 0.5em;
 }
+
 .page-header .user-info .user-info-button:hover {
-  background: #0060df;
+  background: var(--primary);
 }
+
 .page-header .user-info .user-info-button:active {
-  background: #0a84ff;
+  background: var(--primary-medium);
 }
+
 .page-header .user-info .user-info-menu {
-  -webkit-box-shadow: 0px 1px 4px 0 #b1b1b3;
-  -moz-box-shadow: 0px 1px 4px 0 #b1b1b3;
-  box-shadow: 0px 1px 4px 0 #b1b1b3;
+  -webkit-box-shadow: 0px 1px 4px 0 var(--grey);
+  -moz-box-shadow: 0px 1px 4px 0 var(--grey);
+  box-shadow: 0px 1px 4px 0 var(--grey);
   display: none;
   position: absolute;
   right: 0.5em;
   top: 100%;
   background: #ffffff;
-  border: 1px solid #b1b1b3;
+  border: 1px solid var(--grey);
   padding: 0.5em;
   min-width: 100px;
   z-index: 1;
 }
+
 .page-header .user-info .user-info-menu a {
-  font-size: 12px;
+  font-size: var(--base-font-size);
 }
+
 .page-header .user-info .user-info-menu a:link,
 .page-header .user-info .user-info-menu a:hover,
 .page-header .user-info .user-info-menu a:active,
 .page-header .user-info .user-info-menu a:visited {
-  color: #0060df;
+  color: var(--primary);
   text-decoration: none;
 }
+
 .page-header .user-info .user-info-menu a:hover {
   text-decoration: underline;
 }
+
 .protected-info {
   align-items: center;
   margin: 1em 1em 1em;
 }
+
 .threecol {
   overflow: auto;
 }
+
 .threecol .col {
   float: left;
   width: 33%;
-  border-left: 1px dotted #d7d7db;
+  border-left: 1px dotted var(--light-grey);
 }
+
 .threecol .col .col-inner {
   padding: 0 20px;
 }
+
 .threecol .col h3 {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 8px;
 }
+
 .threecol .col:first-child {
   border-left: 0;
 }
+
 .threecol .col:first-child .col-inner {
   padding-left: 10px;
 }
+
 .product-grid {
-  -webkit-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  -moz-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
   display: flex;
   flex-wrap: wrap;
 }
+
 .product-grid .product {
   background: #fff;
   border: 1px gray solid;
@@ -471,37 +560,45 @@ body {
   margin: 20px;
   text-align: center;
 }
+
 .product-grid .product .product-name {
   margin-top: 55px;
 }
+
 .product-grid .product .product-name a {
-  color: #0060df;
+  color: var(--primary);
   font-size: 22px;
   text-decoration: none;
 }
+
 .product-grid .product .product-name a:hover {
   text-decoration: underline;
 }
+
 .product-grid .product .product-description {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 /* Layout elements */
 /* Nav */
 nav {
   display: inline;
 }
+
 nav .options {
   display: inline;
   margin-left: 1em;
   font-size: 1.1em;
   vertical-align: 4px;
 }
+
 nav .options li {
   display: inline;
   list-style: none;
 }
+
 nav .options li a {
-  color: #002275;
+  color: var(--primary-dark);
   padding: 0.3em 0.7em;
   text-decoration: none;
   white-space: nowrap;
@@ -509,157 +606,188 @@ nav .options li a {
   -moz-border-radius: 0.3em;
   border-radius: 0.3em;
 }
+
 nav .options li a:hover {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
 }
+
 nav .options li a.selected,
 nav .options li a.button {
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
 }
+
 .version-nav {
-  font-size: 12px;
+  font-size: var(--base-font-size);
   background: transparent repeat-x left top;
   position: relative;
-  background-color: #0060df;
-  color: #f2f6f9;
+  background-color: var(--primary);
+  color: var(--off-white);
   padding: 0.5em 1rem;
   line-height: 32px;
 }
+
 .version-nav a,
 .version-nav a:link,
 .version-nav a:hover,
 .version-nav a:active,
 .version-nav a:visited {
-  color: #f2f6f9;
+  color: var(--off-white);
 }
+
 .version-nav .filter {
   display: inline;
 }
+
 .version-nav .filter li {
   display: inline;
   padding: 0;
 }
+
 .version-nav .filter li:last-child {
-  border-left: 1px solid #0a84ff;
+  border-left: 1px solid var(--primary-medium);
   margin-left: 0.5em;
   padding-left: 0.8em;
 }
+
 .version-nav .filter optgroup {
-  border-top: 1px solid #d7d7db;
+  border-top: 1px solid var(--light-grey);
   padding: 0.5em 0;
 }
+
 .version-nav .filter optgroup:first-child {
   border-top: 0;
   padding-top: 0;
 }
+
 .version-nav .filter optgroup:last-child {
   padding-bottom: 0;
 }
+
 .version-nav .filter option {
   padding-left: 0;
 }
+
 .version-nav .quick-nav-title {
   display: inline-block;
   margin-right: 1em;
 }
+
 .version-nav .nav-links {
   display: inline;
   float: right;
 }
+
 .page-footer {
-  background: #d7d7db;
-  color: #4a4a4f;
-  border-top: 1px solid #b1b1b3;
+  background: var(--light-grey);
+  color: var(--dark-grey);
+  border-top: 1px solid var(--grey);
   margin: 40px 0 0 0;
   padding: 10px 20px;
 }
+
 .page-footer a:link,
 .page-footer a:hover,
 .page-footer a:active,
 .page-footer a:visited {
-  color: #0060df;
+  color: var(--primary);
   text-decoration: none;
 }
+
 .page-footer a:hover {
   text-decoration: underline;
 }
+
 .page-footer .nav {
   background: url("/static/img/3.0/mozilla.gif") no-repeat scroll 0% -1px transparent;
   background-size: 102px auto;
   float: left;
   padding-left: 109px;
 }
+
 .page-footer ul,
 .page-footer .login {
   display: inline;
 }
+
 .page-footer li {
   display: inline;
   padding: 0 0.5em;
-  border-left: 1px solid #b1b1b3;
+  border-left: 1px solid var(--grey);
   list-style: none;
 }
+
 .page-footer li:first-child {
   border-left: 0;
   padding-left: 0;
 }
+
 .page-footer .login {
   float: right;
   line-height: 18px;
   padding-top: 2px;
 }
+
 /* Common components */
 .accordion {
   margin: 0;
   padding: 0;
   list-style: none;
 }
+
 .accordion h3 {
   color: #ffffff;
   margin: 0;
 }
+
 .accordion a {
   display: block;
-  background-color: #d7d7db;
-  color: #0f1126;
+  background-color: var(--light-grey);
+  color: var(--black);
   padding: 0.5rem;
-  border: 1px solid #4a4a4f;
+  border: 1px solid var(--dark-grey);
   text-decoration: none;
 }
+
 .accordion a:focus,
 .accordion a:active {
-  background-color: #d7d7db;
-  color: #0f1126;
-  border: 1px solid #4a4a4f;
+  background-color: var(--light-grey);
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
   outline: none;
 }
+
 .accordion p {
   margin: 0;
   padding: 0.5rem;
 }
+
 .accordion .content-pane {
   background-color: #ffffff;
-  color: #0f1126;
-  border: 1px solid #4a4a4f;
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
   border-top: 0;
   overflow: hidden;
   height: 0;
   opacity: 0;
   transition: opacity 0.5s;
 }
+
 .accordion .content-pane h3 {
-  color: #4a4a4f;
+  color: var(--dark-grey);
   padding: 0.5rem 1rem;
 }
+
 .accordion .content-pane h4 {
   padding: 0.5rem 1rem 0 0.5rem;
   font-size: 1.2rem;
 }
+
 .accordion .show {
   height: auto;
   opacity: 1;
 }
+
 .accordion [data-icon]:before {
   float: right;
   font-family: 'icons';
@@ -672,97 +800,117 @@ nav .options li a.button {
   /* @see http://css-tricks.com/examples/IconFont/ */
   speak: none;
 }
+
 .accordion [aria-expanded="true"] [data-icon]:before {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
+
 /* Admin */
 div.admin h3,
 div.admin h4 {
   margin-top: 20px;
 }
+
 div.admin p,
 div.admin ul,
 div.admin li {
   margin: 5px 0;
 }
+
 div.admin ul {
   list-style-type: disc;
   list-style-position: inside;
 }
+
 div.admin ul li:before {
   content: "\00BB \0020";
 }
+
 div.admin div.add_item {
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
   margin-top: 10px;
   padding: 5px;
-  border: 2px solid #4a4a4f;
+  border: 2px solid var(--dark-grey);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
+
 div.admin form.span {
   margin-right: 10px;
 }
+
 div.admin th {
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
   padding: 3px;
   font-size: 105%;
 }
+
 div.admin td {
   padding: 3px;
 }
+
 div.admin td.text,
 div.admin input.text {
   width: 125px;
 }
+
 div.admin td.action {
   width: 50px;
 }
+
 div.admin td.featured {
   width: 50px;
   text-align: center;
 }
+
 div.admin td.date {
   width: 75px;
 }
+
 #add_version,
 #update_product_version,
 #delete_product_version {
   display: none;
   min-width: 550px;
 }
+
 #add_version table,
 #update_product_version table,
 #delete_product_version table {
   width: 100%;
 }
+
 #delete_product_display,
 #delete_version_display,
 #update_product_display,
 #update_version_display {
   font-style: italic;
 }
+
 #loading-bds {
   position: absolute;
   top: 9%;
   left: 50%;
 }
+
 div.code {
   background-color: #ffffff;
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   font-family: monospace;
   width: 100%;
   height: 480px;
   white-space: pre;
   overflow: auto;
 }
+
 /* Status Messages */
 div#message {
   margin: 1em;
 }
+
 .message,
 .info {
   margin: 1.5% 2% 0;
@@ -772,58 +920,70 @@ div#message {
   -moz-border-radius: 0.25em;
   border-radius: 0.25em;
 }
+
 .info {
-  background-color: #45a1ff;
-  border: 1px solid #002275;
+  background-color: var(--primary-light);
+  border: 1px solid var(--primary-dark);
 }
+
 .message.error {
-  background-color: #ff9c9c;
-  border: 1px solid #d70022;
+  background-color: var(--pink);
+  border: 1px solid var(--red);
 }
+
 .message.success {
-  background-color: #12bc00;
+  background-color: var(--green);
   border: 1px solid #ffffff;
   color: #ffffff;
 }
+
 .message.warning {
-  background-color: #ff9c9c;
-  border: 1px solid #ff9400;
+  background-color: var(--pink);
+  border: 1px solid var(--orange);
 }
+
 .message h2 {
   margin: 0.5em 0;
   font-size: 1.2em;
 }
+
 /* Pagination */
 .pagination {
   padding: 0.3em 0.2em 0.2em 0.5em;
   text-align: right;
 }
+
 .pagination ol {
   float: right;
   margin-left: 0.5em;
 }
+
 .pagination ol li {
   float: left;
   margin-right: 0.3em;
 }
+
 .panel {
-  color: #0f1126;
-  -webkit-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  -moz-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
+  color: var(--black);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
 }
+
 .content .panel {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
+
 .panel header.title,
 .panel div.title {
-  background: rgba(12, 12, 13, 0.1) repeat-x left top;
+  background: var(--alpha-grey1) repeat-x left top;
   display: flex;
-  font-size: 12px;
+  font-size: var(--base-font-size);
   padding: 1em;
 }
+
 .panel header.title h2,
 .panel div.title h2 {
   display: block;
@@ -833,119 +993,147 @@ div#message {
   margin: 0;
   flex-grow: 1;
 }
+
 .panel header.title .choices,
 .panel div.title .choices {
-  border-left-color: #b1b1b3;
+  border-left-color: var(--grey);
   vertical-align: 1px;
 }
+
 .panel header.title a,
 .panel div.title a {
-  color: #0f1126;
+  color: var(--black);
 }
+
 .panel header.title a:hover,
 .panel div.title a:hover,
 .panel header.title a:focus,
 .panel div.title a:focus {
-  background: #d7d7db;
+  background: var(--light-grey);
 }
+
 .panel header.title a.selected,
 .panel div.title a.selected {
-  background-color: #0a84ff;
+  background-color: var(--primary-medium);
   color: #ffffff;
 }
+
 .panel .body {
   background: #ffffff;
   padding: 1em;
   min-height: 4em;
 }
+
 .panel .table {
   font-size: 10px;
   border-collapse: collapse;
-  border: 1px solid #b1b1b3;
+  border: 1px solid var(--grey);
   border-top: 0;
   width: 100%;
 }
+
 .panel .table td,
 .panel .table th {
   padding: 0.5em 0.5em;
   vertical-align: top;
 }
+
 .panel .table .numalign {
   text-align: right;
 }
+
 .panel .table .spanalign {
   text-align: center;
 }
+
 .panel .table .trend-up {
-  color: #d70022;
+  color: var(--red);
 }
+
 .panel .table .trend-down {
-  color: #12bc00;
+  color: var(--green);
 }
+
 .panel .table thead tr {
-  background: rgba(12, 12, 13, 0.1);
+  background: var(--alpha-grey1);
 }
+
 .panel .table thead th {
-  border: 1px solid #b1b1b3;
+  border: 1px solid var(--grey);
   border-top: 0;
   font-weight: bold;
 }
+
 .panel .table thead th.sortable {
   padding-right: 17px;
 }
+
 .panel .table thead th.sortable:hover {
   cursor: pointer;
 }
+
 .panel .table tbody {
   background-color: #ffffff;
 }
+
 .panel .table tbody tr td:first-child,
 .panel .table tbody tr th:first-child {
   border-left: 0;
 }
+
 .panel .table tbody tr:nth-child(even) {
   background: #ffffff;
 }
+
 .panel .table tbody tr:hover {
-  background: #f2f6f9;
+  background: var(--off-white);
 }
+
 .panel .table tbody td,
 .panel .table tbody th {
-  border-left: 1px dotted #f2f6f9;
-  border-top: 1px solid #f2f6f9;
+  border-left: 1px dotted var(--off-white);
+  border-top: 1px solid var(--off-white);
 }
+
 .panel .table tbody tr:first-child td,
 .panel .table tbody tr:first-child th {
   border-top: 0;
 }
+
 .panel .table tbody td.separated,
 .panel .table tbody th.separated {
-  border-left: 1px solid #b1b1b3;
+  border-left: 1px solid var(--grey);
 }
+
 .panel .table tbody th {
   font-weight: bold;
 }
+
 .panel .table td.count span {
   display: block;
   font-size: 8px;
 }
+
 .panel .table td.count-high {
-  color: #d70022;
+  color: var(--red);
 }
+
 .panel .table td.count-none {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 .panel .table.expand-counts .counts-collapsed,
 .panel .table.expand-counts .counts-expanded {
   display: none;
 }
+
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   border: none;
-  background: #d7d7db;
-  color: #0f1126;
+  background: var(--light-grey);
+  color: var(--black);
   padding: 0.2em 2em 0.2em 0.2em;
   margin: 0;
   border-radius: 2px;
@@ -954,25 +1142,31 @@ select {
   background-size: 8px;
   background-repeat: no-repeat;
 }
+
 select:hover {
-  background-color: #b1b1b3;
+  background-color: var(--grey);
 }
+
 select:active {
   background-color: #737373;
 }
+
 select:focus {
   background-color: #ffffff;
 }
+
 select optgroup,
 select option {
   background-color: #ffffff;
 }
+
 /* simplebox css */
 #simplebox {
   display: none;
 }
+
 #simplebox_wrapper {
-  background-color: #4a4a4f;
+  background-color: var(--dark-grey);
   background-color: rgba(51, 51, 51, 0.5);
   background-color: hsla(0, 0%, 20%, 0.5);
   position: absolute;
@@ -980,6 +1174,7 @@ select option {
   left: 0;
   z-index: 9999;
 }
+
 #close_simplebox {
   position: absolute;
   background: transparent url("/static/img/icons/close_round.png") 0 0 no-repeat;
@@ -991,16 +1186,19 @@ select option {
   cursor: pointer;
   cursor: hand;
 }
+
 .status-icon {
   font-size: 1.3em;
   margin-right: 5px;
   width: 16px;
 }
+
 #sumo-link {
   float: right;
 }
+
 #sumo-link a {
-  background-color: #0060df;
+  background-color: var(--primary);
   padding: 0.8em;
   border: none;
   border-radius: 2px;
@@ -1009,58 +1207,71 @@ select option {
   text-align: right;
   margin: 0px auto 10px;
 }
+
 #sumo-link a,
 #sumo-link a a {
   color: #ffffff;
   text-decoration: none;
 }
+
 #sumo-link a:hover,
 #sumo-link a:focus {
   background: #003eaa;
 }
+
 #sumo-link a:active {
-  background: #002275;
+  background: var(--primary-dark);
 }
+
 table.tablesorter th {
-  background-color: rgba(12, 12, 13, 0.2);
-  border: solid 1px #b1b1b3;
+  background-color: var(--alpha-grey2);
+  border: solid 1px var(--grey);
 }
+
 table.tablesorter tbody tr.odd {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
 }
+
 table.tablesorter tbody td {
   padding: 7px 0.5em 8px 0.5em;
   background-color: transparent;
 }
+
 table.tablesorter tbody tr td.in1 {
   padding-left: 15px;
 }
+
 table.tablesorter tbody tr td.in2 {
   padding-left: 30px;
 }
+
 .note {
-  background-color: #f2f6f9;
-  border: 1px solid #0060df;
+  background-color: var(--off-white);
+  border: 1px solid var(--primary);
   border-radius: 4px;
   margin: 0 0 10px 10px;
 }
+
 .note.float-right {
   float: right;
   min-width: 300px;
   width: 30%;
 }
+
 .note p {
   padding: 10px 10px;
   margin: 0;
 }
+
 .note::before {
   content: url("/static/img/3rdparty/silk/information.png") ' Note';
   display: block;
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
   font-weight: bold;
   padding: 4px 10px;
 }
+
 /* Tip text */
 .tip {
   padding: 0.8em;
@@ -1069,10 +1280,12 @@ table.tablesorter tbody tr td.in2 {
   background-color: #ededf0;
   color: #0c0c0d;
 }
+
 .tip::before {
   content: "Tip! ";
   font-weight: bold;
 }
+
 .tip-note {
   padding: 0.5em 0.8em;
   margin: 0.5em 0;
@@ -1080,10 +1293,12 @@ table.tablesorter tbody tr td.in2 {
   background-color: #ededf0;
   color: #0c0c0d;
 }
+
 .tip-note::before {
   content: "Note! ";
   font-weight: bold;
 }
+
 /* From http://cssdeck.com/labs/pure-css-tree-menu-framework */
 .tree,
 .tree ul {
@@ -1093,9 +1308,11 @@ table.tablesorter tbody tr td.in2 {
   list-style: none;
   position: relative;
 }
+
 .tree ul {
   margin-left: 0.5em;
 }
+
 /* (indentation/2) */
 .tree:before,
 .tree ul:before {
@@ -1108,6 +1325,7 @@ table.tablesorter tbody tr td.in2 {
   left: 0;
   border-left: 1px solid;
 }
+
 .tree li {
   margin: 0;
   padding: 0 1.5em;
@@ -1117,6 +1335,7 @@ table.tablesorter tbody tr td.in2 {
   font-weight: bold;
   position: relative;
 }
+
 .tree li:before {
   content: "";
   display: block;
@@ -1131,6 +1350,7 @@ table.tablesorter tbody tr td.in2 {
   /* (line-height/2) */
   left: 0;
 }
+
 .tree li:last-child:before {
   background: #ffffff;
   /* same with body background */
@@ -1139,44 +1359,55 @@ table.tablesorter tbody tr td.in2 {
   /* (line-height/2) */
   bottom: 0;
 }
+
 /*************************** End imported styles ******************************/
 
 /* Other shared styles */
 a {
   text-decoration: none;
 }
+
 a,
 a:link,
 a:hover,
 a:active {
-  color: #0060df;
+  color: var(--primary);
   text-decoration: underline;
 }
+
 .ui-widget-content a:visited,
 a:visited {
-  color: #8000d7;
+  color: var(--purple);
 }
-body > h1 {
+
+body>h1 {
   font-size: 200%;
 }
+
 .clear {
   clear: both;
 }
+
 .clear_left {
   clear: left;
 }
+
 .clear_right {
   clear: right;
 }
+
 .float_left {
   float: left;
 }
+
 .float_right {
   float: right;
 }
+
 .hidden {
   display: none;
 }
+
 .visually-hidden {
   position: absolute;
   clip: rect(1px 1px 1px 1px);
@@ -1188,217 +1419,273 @@ body > h1 {
   width: 1px;
   overflow: hidden;
 }
+
 time {
   display: inline-block;
 }
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+
 .w-1\/12 {
   width: 8.3333%;
 }
+
 .w-2\/12 {
   width: 16.6667%;
 }
+
 .w-3\/12 {
   width: 25%;
 }
+
 .w-4\/12 {
   width: 33.3333%;
 }
+
 .w-5\/12 {
   width: 41.6667%;
 }
+
 .w-6\/12 {
   width: 50%;
 }
+
 .w-7\/12 {
   width: 58.3333%;
 }
+
 .w-8\/12 {
   width: 66.6667%;
 }
+
 .w-9\/12 {
   width: 75%;
 }
+
 .w-10\/12 {
   width: 83.3333%;
 }
+
 .w-11\/12 {
   width: 91.666667%;
 }
+
 .w-full {
   width: 100%;
 }
+
 #mainbody {
   position: relative;
   margin: 1em 2em;
   text-align: left;
   flex: 1;
 }
+
 .loading {
   position: absolute;
   top: 45%;
   left: 45%;
 }
+
 .inline-loader {
   width: 18px;
   height: 18px;
   vertical-align: middle;
 }
+
 .logout-form {
   display: inline;
 }
+
 button.logout-button {
   background: none;
-  color: #0060df;
-  font-size: 12px;
+  color: var(--primary);
+  font-size: var(--base-font-size);
   padding: 0;
 }
+
 button.logout-button:hover {
   background: none;
   text-decoration: underline;
 }
+
 /* --- */
 /* --- */
 #data_sources {
   border: 0;
 }
+
 #data_sources table {
   width: 100%;
 }
+
 #data_sources th:last-child {
   width: 80px;
 }
+
 #data_sources_nav {
   background: none;
   border: 0;
 }
+
 #data_sources_nav li {
   background: none;
   border: 0;
 }
+
 #data_sources_nav li:before {
   content: "";
 }
+
 span.push_right {
   margin-right: 10px;
 }
+
 .list tr:nth-child(2n+1) {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
 }
+
 .list tr:nth-child(2n) {
   background-color: #ffffff;
 }
+
 .list tr:hover {
   background-color: #ffffff;
 }
+
 .list tr td {
   padding: 0.5em;
   text-align: left;
 }
+
 .list tr td label {
-  border-bottom: 1px dashed #b1b1b3;
+  border-bottom: 1px dashed var(--grey);
   font-weight: normal;
 }
+
 .list th {
-  background: #f2f6f9;
+  background: var(--off-white);
   padding: 2px;
-  border: 1px solid #0f1126;
+  border: 1px solid var(--black);
   font-weight: bold;
 }
+
 .list th a {
   display: block;
   padding: 0.2em 1.2em 0.2em 0.2em;
   text-align: left;
 }
+
 .list th a:hover {
   background-color: #ffffff;
 }
+
 .oopp-hang {
   clear: right;
   float: right;
 }
+
 .oopp-hang .current {
   float: right;
   background-image: url("/static/img/3rdparty/fatcow/stop16x16.png");
   background-repeat: no-repeat;
-  color: #d70022;
+  color: var(--red);
   padding-left: 20px;
   height: 16px;
   font-weight: 900;
 }
+
 .oopp-hang .current .type {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 .oopp-hang .pair {
   clear: right;
   padding: 0.5em 0 0.5em 0.5em;
 }
+
 .oopp-hang .pair a {
   text-decoration: none;
 }
+
 td.in1 ul,
 td.in2 ul {
   padding-left: 15px;
 }
+
 .trend {
   font-weight: 900;
   color: #ffffff;
 }
+
 .trend.up {
-  background: url("/static/img/up_arrow.png") no-repeat scroll right 10px #d70022;
+  background: url("/static/img/up_arrow.png") no-repeat scroll right 10px var(--red);
 }
+
 .trend.down {
-  background: url("/static/img/down_arrow.png") no-repeat scroll right 10px #12bc00;
+  background: url("/static/img/down_arrow.png") no-repeat scroll right 10px var(--green);
 }
+
 .complete {
   position: absolute;
   right: 0px;
   background-color: #ffffff;
-  border: solid 1px #b1b1b3;
+  border: solid 1px var(--grey);
   margin: 1em;
 }
+
 .correlation-module {
   position: relative;
   float: left;
   padding: 1em;
   width: 320px;
 }
+
 .correlation-module h3 {
   font-weight: bold;
 }
+
 #duration-nav {
   float: right;
 }
+
 #duration-nav ul li {
   float: left;
   padding-right: 1em;
   list-style-type: none;
 }
+
 div.expandable-menu,
 div.each-sparkline {
   margin-left: 12px;
   border: none;
 }
+
 .correlation-cell div div.complete {
   display: none;
 }
+
 .correlation pre {
   clear: left;
 }
+
 .correlation h3 {
   margin-top: 0.1em;
 }
+
 .complete h3 {
   margin: 0.75em 0 0 0;
 }
+
 /* jQueryUI theme overrides */
 .ui-tabs-panel {
-  border: 1px solid #f2f6f9;
-}
+  border: 1px solid var(--off-white);
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css b/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css
index c5d81d310d..800af042d9 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css
@@ -4,12 +4,12 @@
 /* Photon Colors Less Variables v3.0.1 */
 /* Django forms in general */
 ul.errorlist li {
-  color: #d70022;
+  color: var(--red);
 }
 input[type="submit"],
 input[type="button"],
 button {
-  background-color: #0060df;
+  background-color: var(--primary);
   padding: 0.8em;
   border: none;
   border-radius: 2px;
@@ -35,5 +35,5 @@ button:focus {
 input[type="submit"]:active,
 input[type="button"]:active,
 button:active {
-  background: #002275;
+  background: var(--primary-dark);
 }
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css b/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css
index 5afc885948..fb42a3be0d 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css
@@ -3,59 +3,71 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 html {
-  background: #f2f6f9;
-  color: #4a4a4f;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-  line-height: 1.7;
+  background: var(--off-white);
+  color: var(--dark-grey);
+  font-family: var(--base-font);
+  font-size: var(--base-font-size);
+  line-height: var(--base-line-height);
   margin: 0;
   padding: 0;
 }
+
 html.production {
   margin: 0;
 }
-html.production body > h1 {
+
+html.production body>h1 {
   display: none;
 }
+
 html.production .page-heading {
   margin: 1em 1em 1em;
   display: flex;
   align-items: center;
 }
+
 html.production .page-heading h2 {
   flex: auto;
   font-size: 1.6em;
   margin: 0;
 }
+
 html.production .page-heading nav {
   flex: initial;
   flex-shrink: 0;
 }
+
 html.production .panel {
   margin: 1em;
 }
+
 body {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }
+
 .page-header {
   position: relative;
   min-height: 64px;
   height: 64px;
-  background-color: #002275;
+  background-color: var(--primary-dark);
   display: flex;
   align-items: center;
 }
-.page-header > * {
+
+.page-header>* {
   margin: 0 0.5em;
 }
-.page-header > *:first-child {
+
+.page-header>*:first-child {
   margin-left: 0;
 }
-.page-header > *:last-child {
+
+.page-header>*:last-child {
   margin-right: 0;
 }
+
 .page-header .title {
   flex: 1;
   border: none;
@@ -69,26 +81,31 @@ body {
   padding-left: 0.5em;
   line-height: 64px;
 }
+
 .page-header #simple_search {
   flex: 0 0 auto;
 }
+
 .page-header #simple_search label {
   color: #ffffff;
 }
+
 .page-header #simple_search input {
   background: #ffffff url("/static/img/2.0/search.png") no-repeat 5px center;
   border: none;
   width: 212px;
   padding: 3px 4px 4px 28px;
-  font-size: 12px;
-  color: #4a4a4f;
+  font-size: var(--base-font-size);
+  color: var(--dark-grey);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
+
 .page-header #simple_search input:-moz-placeholder {
-  color: #d7d7db;
+  color: var(--light-grey);
 }
+
 .page-header .user-info {
   flex: 0 0 auto;
   height: 100%;
@@ -96,14 +113,17 @@ body {
   align-items: center;
   font-size: 14px;
 }
+
 .page-header .user-info .signup-link {
-  color: #f2f6f9;
+  color: var(--off-white);
   padding: 0 1em;
 }
+
 .page-header .user-info .login-link {
-  color: #f2f6f9;
+  color: var(--off-white);
   padding: 0 1em;
 }
+
 .page-header .user-info .user-info-button {
   background: transparent;
   border: none;
@@ -115,75 +135,91 @@ body {
   position: relative;
   padding: 0 1em;
 }
+
 .page-header .user-info .user-info-button .user-email {
   margin-right: 0.5em;
 }
+
 .page-header .user-info .user-info-button:hover {
-  background: #0060df;
+  background: var(--primary);
 }
+
 .page-header .user-info .user-info-button:active {
-  background: #0a84ff;
+  background: var(--primary-medium);
 }
+
 .page-header .user-info .user-info-menu {
-  -webkit-box-shadow: 0px 1px 4px 0 #b1b1b3;
-  -moz-box-shadow: 0px 1px 4px 0 #b1b1b3;
-  box-shadow: 0px 1px 4px 0 #b1b1b3;
+  -webkit-box-shadow: 0px 1px 4px 0 var(--grey);
+  -moz-box-shadow: 0px 1px 4px 0 var(--grey);
+  box-shadow: 0px 1px 4px 0 var(--grey);
   display: none;
   position: absolute;
   right: 0.5em;
   top: 100%;
   background: #ffffff;
-  border: 1px solid #b1b1b3;
+  border: 1px solid var(--grey);
   padding: 0.5em;
   min-width: 100px;
   z-index: 1;
 }
+
 .page-header .user-info .user-info-menu a {
-  font-size: 12px;
+  font-size: var(--base-font-size);
 }
+
 .page-header .user-info .user-info-menu a:link,
 .page-header .user-info .user-info-menu a:hover,
 .page-header .user-info .user-info-menu a:active,
 .page-header .user-info .user-info-menu a:visited {
-  color: #0060df;
+  color: var(--primary);
   text-decoration: none;
 }
+
 .page-header .user-info .user-info-menu a:hover {
   text-decoration: underline;
 }
+
 .protected-info {
   align-items: center;
   margin: 1em 1em 1em;
 }
+
 .threecol {
   overflow: auto;
 }
+
 .threecol .col {
   float: left;
   width: 33%;
-  border-left: 1px dotted #d7d7db;
+  border-left: 1px dotted var(--light-grey);
 }
+
 .threecol .col .col-inner {
   padding: 0 20px;
 }
+
 .threecol .col h3 {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 8px;
 }
+
 .threecol .col:first-child {
   border-left: 0;
 }
+
 .threecol .col:first-child .col-inner {
   padding-left: 10px;
 }
+
 .product-grid {
-  -webkit-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  -moz-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
   display: flex;
   flex-wrap: wrap;
 }
+
 .product-grid .product {
   background: #fff;
   border: 1px gray solid;
@@ -193,17 +229,21 @@ body {
   margin: 20px;
   text-align: center;
 }
+
 .product-grid .product .product-name {
   margin-top: 55px;
 }
+
 .product-grid .product .product-name a {
-  color: #0060df;
+  color: var(--primary);
   font-size: 22px;
   text-decoration: none;
 }
+
 .product-grid .product .product-name a:hover {
   text-decoration: underline;
 }
+
 .product-grid .product .product-description {
-  color: #4a4a4f;
-}
+  color: var(--dark-grey);
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css b/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css
index a596221e3f..8a2335d57f 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css
@@ -9,7 +9,7 @@
 }
 html {
   background: #ffffff;
-  color: #0f1126;
+  color: var(--black);
 }
 body,
 div,
@@ -110,5 +110,5 @@ select {
   font-size: 100%;
 }
 legend {
-  color: #0f1126;
+  color: var(--black);
 }
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css b/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css
index a7a36e87db..1960781b4b 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css
@@ -11,11 +11,11 @@ table tbody tr {
 }
 table thead tr th,
 table tbody tr th {
-  border: 1px solid #0f1126;
+  border: 1px solid var(--black);
 }
 table thead tr td,
 table tbody tr td {
-  border: solid 1px #b1b1b3;
+  border: solid 1px var(--grey);
 }
 table th {
   font-weight: bold;
@@ -31,7 +31,7 @@ table.zebra {
 }
 table.data-table tr:nth-child(even),
 table.zebra tr:nth-child(even) {
-  background-color: rgba(12, 12, 13, 0.1);
+  background-color: var(--alpha-grey1);
 }
 table.data-table tr:nth-child(odd),
 table.zebra tr:nth-child(odd) {
@@ -39,10 +39,10 @@ table.zebra tr:nth-child(odd) {
 }
 table.data-table tr:hover,
 table.zebra tr:hover {
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
 }
 table th {
-  background-color: rgba(12, 12, 13, 0.2);
+  background-color: var(--alpha-grey2);
 }
 table th,
 table td {
@@ -52,15 +52,15 @@ table tbody {
   background-color: #ffffff;
 }
 table tbody tr.truncated-frame {
-  background-color: #fcb35f;
+  background-color: var(--jsonview-prop);
 }
 table tbody tr.truncated-frame a {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
 table tbody tr.missingsymbols,
 table tbody tr.missingsymbols:hover,
 table tbody tr.missingsymbols td {
-  background-color: #d70022;
+  background-color: var(--red);
   color: #ffffff;
   border-top: 2px solid #ffffff;
 }
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/variables.css b/webapp/crashstats/crashstats/static/crashstats/css/base/variables.css
new file mode 100644
index 0000000000..73957e75d9
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/variables.css
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  /* colors */
+  --primary-light: #45a1ff;
+  --primary-medium: #0a84ff;
+  --primary: #0060df;
+  --primary-dark: #002275;
+
+  --off-white: #f2f6f9;
+  --black: #0f1126;
+
+  --blue: var(--primary);
+  --red: #d70022;
+  --orange: #ff9400;
+  --green: #12bc00;
+  --purple: #8000d7;
+  --pink: #ff9c9c;
+
+  --alpha-grey1: rgba(12, 12, 13, 0.1);
+  --alpha-grey2: rgba(12, 12, 13, 0.2);
+
+  --light-grey: #d7d7db;
+  --grey: #b1b1b3;
+  --dark-grey: #4a4a4f;
+
+  --jsonview-prop: #fcb35f;
+
+  /* fonts/headings */
+  --base-font: Helvetica, Arial, sans-serif;
+  --base-font-size: 12px;
+  --base-line-height: 1.7;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css b/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css
index a789d9f192..42d8d23e12 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css
@@ -7,51 +7,60 @@
   padding: 0;
   list-style: none;
 }
+
 .accordion h3 {
   color: #ffffff;
   margin: 0;
 }
+
 .accordion a {
   display: block;
-  background-color: #d7d7db;
-  color: #0f1126;
+  background-color: var(--light-grey);
+  color: var(--black);
   padding: 0.5rem;
-  border: 1px solid #4a4a4f;
+  border: 1px solid var(--dark-grey);
   text-decoration: none;
 }
+
 .accordion a:focus,
 .accordion a:active {
-  background-color: #d7d7db;
-  color: #0f1126;
-  border: 1px solid #4a4a4f;
+  background-color: var(--light-grey);
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
   outline: none;
 }
+
 .accordion p {
   margin: 0;
   padding: 0.5rem;
 }
+
 .accordion .content-pane {
   background-color: #ffffff;
-  color: #0f1126;
-  border: 1px solid #4a4a4f;
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
   border-top: 0;
   overflow: hidden;
   height: 0;
   opacity: 0;
   transition: opacity 0.5s;
 }
+
 .accordion .content-pane h3 {
-  color: #4a4a4f;
+  color: var(--dark-grey);
   padding: 0.5rem 1rem;
 }
+
 .accordion .content-pane h4 {
   padding: 0.5rem 1rem 0 0.5rem;
   font-size: 1.2rem;
 }
+
 .accordion .show {
   height: auto;
   opacity: 1;
 }
+
 .accordion [data-icon]:before {
   float: right;
   font-family: 'icons';
@@ -64,8 +73,9 @@
   /* @see http://css-tricks.com/examples/IconFont/ */
   speak: none;
 }
+
 .accordion [aria-expanded="true"] [data-icon]:before {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css b/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css
index 44b2919201..67f77b1870 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css
@@ -20,10 +20,10 @@ div.admin ul li:before {
   content: "\00BB \0020";
 }
 div.admin div.add_item {
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
   margin-top: 10px;
   padding: 5px;
-  border: 2px solid #4a4a4f;
+  border: 2px solid var(--dark-grey);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
@@ -32,7 +32,7 @@ div.admin form.span {
   margin-right: 10px;
 }
 div.admin th {
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
   padding: 3px;
   font-size: 105%;
 }
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css b/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css
index 0a8a7c9003..12994278be 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css
@@ -14,7 +14,7 @@ th.bugzilla_numbers {
   background-color: #ffffff;
   margin-top: 1em;
   padding: 1em 1.5em;
-  border: solid 1px #d7d7db;
+  border: solid 1px var(--light-grey);
   min-width: 300px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/code.css b/webapp/crashstats/crashstats/static/crashstats/css/components/code.css
index b898de4cd9..d00d3782c6 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/code.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/code.css
@@ -4,7 +4,7 @@
 /* Photon Colors Less Variables v3.0.1 */
 div.code {
   background-color: #ffffff;
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   font-family: monospace;
   width: 100%;
   height: 480px;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css b/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css
index 96ed42eee6..8f9fd2f3e5 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css
@@ -3,44 +3,51 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 .page-footer {
-  background: #d7d7db;
-  color: #4a4a4f;
-  border-top: 1px solid #b1b1b3;
+  background: var(--light-grey);
+  color: var(--dark-grey);
+  border-top: 1px solid var(--grey);
   margin: 40px 0 0 0;
   padding: 10px 20px;
 }
+
 .page-footer a:link,
 .page-footer a:hover,
 .page-footer a:active,
 .page-footer a:visited {
-  color: #0060df;
+  color: var(--primary);
   text-decoration: none;
 }
+
 .page-footer a:hover {
   text-decoration: underline;
 }
+
 .page-footer .nav {
   background: url("/static/img/3.0/mozilla.gif") no-repeat scroll 0% -1px transparent;
   background-size: 102px auto;
   float: left;
   padding-left: 109px;
 }
+
 .page-footer ul,
 .page-footer .login {
   display: inline;
 }
+
 .page-footer li {
   display: inline;
   padding: 0 0.5em;
-  border-left: 1px solid #b1b1b3;
+  border-left: 1px solid var(--grey);
   list-style: none;
 }
+
 .page-footer li:first-child {
   border-left: 0;
   padding-left: 0;
 }
+
 .page-footer .login {
   float: right;
   line-height: 18px;
   padding-top: 2px;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/message.css b/webapp/crashstats/crashstats/static/crashstats/css/components/message.css
index 1210b912e5..8350ff11cc 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/message.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/message.css
@@ -6,6 +6,7 @@
 div#message {
   margin: 1em;
 }
+
 .message,
 .info {
   margin: 1.5% 2% 0;
@@ -15,24 +16,29 @@ div#message {
   -moz-border-radius: 0.25em;
   border-radius: 0.25em;
 }
+
 .info {
-  background-color: #45a1ff;
-  border: 1px solid #002275;
+  background-color: var(--primary-light);
+  border: 1px solid var(--primary-dark);
 }
+
 .message.error {
-  background-color: #ff9c9c;
-  border: 1px solid #d70022;
+  background-color: var(--pink);
+  border: 1px solid var(--red);
 }
+
 .message.success {
-  background-color: #12bc00;
+  background-color: var(--green);
   border: 1px solid #ffffff;
   color: #ffffff;
 }
+
 .message.warning {
-  background-color: #ff9c9c;
-  border: 1px solid #ff9400;
+  background-color: var(--pink);
+  border: 1px solid var(--orange);
 }
+
 .message h2 {
   margin: 0.5em 0;
   font-size: 1.2em;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css b/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css
index 5a6b939f80..5799b999c4 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css
@@ -6,18 +6,21 @@
 nav {
   display: inline;
 }
+
 nav .options {
   display: inline;
   margin-left: 1em;
   font-size: 1.1em;
   vertical-align: 4px;
 }
+
 nav .options li {
   display: inline;
   list-style: none;
 }
+
 nav .options li a {
-  color: #002275;
+  color: var(--primary-dark);
   padding: 0.3em 0.7em;
   text-decoration: none;
   white-space: nowrap;
@@ -25,61 +28,74 @@ nav .options li a {
   -moz-border-radius: 0.3em;
   border-radius: 0.3em;
 }
+
 nav .options li a:hover {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
 }
+
 nav .options li a.selected,
 nav .options li a.button {
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
 }
+
 .version-nav {
-  font-size: 12px;
+  font-size: var(--base-font-size);
   background: transparent repeat-x left top;
   position: relative;
-  background-color: #0060df;
-  color: #f2f6f9;
+  background-color: var(--primary);
+  color: var(--off-white);
   padding: 0.5em 1rem;
   line-height: 32px;
 }
+
 .version-nav a,
 .version-nav a:link,
 .version-nav a:hover,
 .version-nav a:active,
 .version-nav a:visited {
-  color: #f2f6f9;
+  color: var(--off-white);
 }
+
 .version-nav .filter {
   display: inline;
 }
+
 .version-nav .filter li {
   display: inline;
   padding: 0;
 }
+
 .version-nav .filter li:last-child {
-  border-left: 1px solid #0a84ff;
+  border-left: 1px solid var(--primary-medium);
   margin-left: 0.5em;
   padding-left: 0.8em;
 }
+
 .version-nav .filter optgroup {
-  border-top: 1px solid #d7d7db;
+  border-top: 1px solid var(--light-grey);
   padding: 0.5em 0;
 }
+
 .version-nav .filter optgroup:first-child {
   border-top: 0;
   padding-top: 0;
 }
+
 .version-nav .filter optgroup:last-child {
   padding-bottom: 0;
 }
+
 .version-nav .filter option {
   padding-left: 0;
 }
+
 .version-nav .quick-nav-title {
   display: inline-block;
   margin-right: 1em;
 }
+
 .version-nav .nav-links {
   display: inline;
   float: right;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/note.css b/webapp/crashstats/crashstats/static/crashstats/css/components/note.css
index 43b3bb38b1..5d1210047c 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/note.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/note.css
@@ -3,25 +3,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 .note {
-  background-color: #f2f6f9;
-  border: 1px solid #0060df;
+  background-color: var(--off-white);
+  border: 1px solid var(--primary);
   border-radius: 4px;
   margin: 0 0 10px 10px;
 }
+
 .note.float-right {
   float: right;
   min-width: 300px;
   width: 30%;
 }
+
 .note p {
   padding: 10px 10px;
   margin: 0;
 }
+
 .note::before {
   content: url("/static/img/3rdparty/silk/information.png") ' Note';
   display: block;
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
   font-weight: bold;
   padding: 4px 10px;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css b/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css
index b90c1a6ee8..c712996fd5 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css
@@ -3,23 +3,26 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 .panel {
-  color: #0f1126;
-  -webkit-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  -moz-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
+  color: var(--black);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
 }
+
 .content .panel {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
+
 .panel header.title,
 .panel div.title {
-  background: rgba(12, 12, 13, 0.1) repeat-x left top;
+  background: var(--alpha-grey1) repeat-x left top;
   display: flex;
-  font-size: 12px;
+  font-size: var(--base-font-size);
   padding: 1em;
 }
+
 .panel header.title h2,
 .panel div.title h2 {
   display: block;
@@ -29,109 +32,136 @@
   margin: 0;
   flex-grow: 1;
 }
+
 .panel header.title .choices,
 .panel div.title .choices {
-  border-left-color: #b1b1b3;
+  border-left-color: var(--grey);
   vertical-align: 1px;
 }
+
 .panel header.title a,
 .panel div.title a {
-  color: #0f1126;
+  color: var(--black);
 }
+
 .panel header.title a:hover,
 .panel div.title a:hover,
 .panel header.title a:focus,
 .panel div.title a:focus {
-  background: #d7d7db;
+  background: var(--light-grey);
 }
+
 .panel header.title a.selected,
 .panel div.title a.selected {
-  background-color: #0a84ff;
+  background-color: var(--primary-medium);
   color: #ffffff;
 }
+
 .panel .body {
   background: #ffffff;
   padding: 1em;
   min-height: 4em;
 }
+
 .panel .table {
   font-size: 10px;
   border-collapse: collapse;
-  border: 1px solid #b1b1b3;
+  border: 1px solid var(--grey);
   border-top: 0;
   width: 100%;
 }
+
 .panel .table td,
 .panel .table th {
   padding: 0.5em 0.5em;
   vertical-align: top;
 }
+
 .panel .table .numalign {
   text-align: right;
 }
+
 .panel .table .spanalign {
   text-align: center;
 }
+
 .panel .table .trend-up {
-  color: #d70022;
+  color: var(--red);
 }
+
 .panel .table .trend-down {
-  color: #12bc00;
+  color: var(--green);
 }
+
 .panel .table thead tr {
-  background: rgba(12, 12, 13, 0.1);
+  background: var(--alpha-grey1);
 }
+
 .panel .table thead th {
-  border: 1px solid #b1b1b3;
+  border: 1px solid var(--grey);
   border-top: 0;
   font-weight: bold;
 }
+
 .panel .table thead th.sortable {
   padding-right: 17px;
 }
+
 .panel .table thead th.sortable:hover {
   cursor: pointer;
 }
+
 .panel .table tbody {
   background-color: #ffffff;
 }
+
 .panel .table tbody tr td:first-child,
 .panel .table tbody tr th:first-child {
   border-left: 0;
 }
+
 .panel .table tbody tr:nth-child(even) {
   background: #ffffff;
 }
+
 .panel .table tbody tr:hover {
-  background: #f2f6f9;
+  background: var(--off-white);
 }
+
 .panel .table tbody td,
 .panel .table tbody th {
-  border-left: 1px dotted #f2f6f9;
-  border-top: 1px solid #f2f6f9;
+  border-left: 1px dotted var(--off-white);
+  border-top: 1px solid var(--off-white);
 }
+
 .panel .table tbody tr:first-child td,
 .panel .table tbody tr:first-child th {
   border-top: 0;
 }
+
 .panel .table tbody td.separated,
 .panel .table tbody th.separated {
-  border-left: 1px solid #b1b1b3;
+  border-left: 1px solid var(--grey);
 }
+
 .panel .table tbody th {
   font-weight: bold;
 }
+
 .panel .table td.count span {
   display: block;
   font-size: 8px;
 }
+
 .panel .table td.count-high {
-  color: #d70022;
+  color: var(--red);
 }
+
 .panel .table td.count-none {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 .panel .table.expand-counts .counts-collapsed,
 .panel .table.expand-counts .counts-expanded {
   display: none;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/select.css b/webapp/crashstats/crashstats/static/crashstats/css/components/select.css
index 3f5e7581ca..154056b580 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/select.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/select.css
@@ -7,8 +7,8 @@ select {
   -webkit-appearance: none;
   cursor: pointer;
   border: none;
-  background: #d7d7db;
-  color: #0f1126;
+  background: var(--light-grey);
+  color: var(--black);
   padding: 0.2em 2em 0.2em 0.2em;
   margin: 0;
   border-radius: 2px;
@@ -17,16 +17,20 @@ select {
   background-size: 8px;
   background-repeat: no-repeat;
 }
+
 select:hover {
-  background-color: #b1b1b3;
+  background-color: var(--grey);
 }
+
 select:active {
   background-color: #737373;
 }
+
 select:focus {
   background-color: #ffffff;
 }
+
 select optgroup,
 select option {
   background-color: #ffffff;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css b/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css
index 5952988b13..6f0d321035 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css
@@ -7,7 +7,7 @@
   display: none;
 }
 #simplebox_wrapper {
-  background-color: #4a4a4f;
+  background-color: var(--dark-grey);
   background-color: rgba(51, 51, 51, 0.5);
   background-color: hsla(0, 0%, 20%, 0.5);
   position: absolute;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css b/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css
index e183ace1f7..2fa3fdacff 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css
@@ -6,7 +6,7 @@
   float: right;
 }
 #sumo-link a {
-  background-color: #0060df;
+  background-color: var(--primary);
   padding: 0.8em;
   border: none;
   border-radius: 2px;
@@ -25,5 +25,5 @@
   background: #003eaa;
 }
 #sumo-link a:active {
-  background: #002275;
+  background: var(--primary-dark);
 }
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css b/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css
index 7d81b6702c..20742d86ec 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css
@@ -3,19 +3,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 table.tablesorter th {
-  background-color: rgba(12, 12, 13, 0.2);
-  border: solid 1px #b1b1b3;
+  background-color: var(--alpha-grey2);
+  border: solid 1px var(--grey);
 }
+
 table.tablesorter tbody tr.odd {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
 }
+
 table.tablesorter tbody td {
   padding: 7px 0.5em 8px 0.5em;
   background-color: transparent;
 }
+
 table.tablesorter tbody tr td.in1 {
   padding-left: 15px;
 }
+
 table.tablesorter tbody tr td.in2 {
   padding-left: 30px;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css b/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css
index 5302b80450..5678ba6eaa 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css
@@ -15,19 +15,19 @@ div.release_channel li {
   /* 14px or 1.1(r)em */
 }
 div.release_channel li a {
-  color: #002275;
+  color: var(--primary-dark);
   text-decoration: none;
 }
 div.release_channel li a:hover,
 div.release_channel li a:active {
-  color: #0060df;
+  color: var(--primary);
 }
 div.release_channel li.focused a,
 div.release_channel li.focused a:link,
 div.release_channel li.focused a:hover,
 div.release_channel li.focused a:active {
-  color: #0060df;
+  color: var(--primary);
 }
 .border_right {
-  border-right: 1px dashed rgba(12, 12, 13, 0.2);
+  border-right: 1px dashed var(--alpha-grey2);
 }
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css
index 787d8c1552..46ba435c12 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css
@@ -23,10 +23,10 @@
   margin-left: 0.5em;
 }
 .bugreporter {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
   margin-top: 1em;
   padding: 0 0.4em;
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
@@ -63,17 +63,17 @@
 .sig-search {
   background: transparent url("/static/img/icons/external.png") left top no-repeat;
   display: inline-block;
-  color: #4a4a4f;
+  color: var(--dark-grey);
   margin-left: 0.5em;
   padding-left: 17px;
-  font-size: 12px;
+  font-size: var(--base-font-size);
   font-weight: bold;
 }
 .sig-overview:link,
 .sig-overview:visited,
 .sig-search:link,
 .sig-search:visited {
-  color: #0f1126;
+  color: var(--black);
   text-decoration: none;
 }
 /**
@@ -84,7 +84,7 @@
   display: inline-block;
   position: absolute;
   left: -6px;
-  background-color: #d70022;
+  background-color: var(--red);
   color: #ffffff;
   margin-top: -6px;
   padding: 0.5rem 0.5rem 0.2rem;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css
index 1810d6e90d..e6420b989d 100644
--- a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css
+++ b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css
@@ -4,7 +4,7 @@
 /* Photon Colors Less Variables v3.0.1 */
 div.pending {
   background-color: #ffffff;
-  color: #4a4a4f;
+  color: var(--dark-grey);
   margin: 20px auto;
   padding: 10px;
   border: 4px solid #999;
@@ -15,7 +15,7 @@ div.pending {
   border-radius: 25px;
 }
 div.pending p {
-  font-size: 12px;
+  font-size: var(--base-font-size);
 }
 div.pending img {
   margin: 10px 0;
diff --git a/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css b/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css
index e70250020b..7d6dfca303 100644
--- a/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css
+++ b/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css
@@ -3,34 +3,39 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 .json-document {
-  background-color: #0f1126;
-  color: #fcb35f;
+  background-color: var(--black);
+  color: var(--jsonview-prop);
   font-family: monospace;
   font-size: 1.1em;
   white-space: pre-wrap;
 }
+
 .json-document a,
 .json-document a:hover,
 .json-document a:visited,
 .json-document .json-toggle,
 .json-document .json-dict {
-  color: #fcb35f;
+  color: var(--jsonview-prop);
 }
+
 .json-document .json-literal {
-  color: #45a1ff;
+  color: var(--primary-light);
 }
+
 .json-document .json-string {
-  color: #12bc00;
+  color: var(--green);
   white-space: pre-wrap;
 }
+
 .json-document ol,
 .json-document ul {
   list-style: none;
   margin: 0 0 0 2em;
   padding: 0;
 }
+
 .json-document ol li,
 .json-document ul li {
   list-style: none;
   position: relative;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/documentation/static/documentation/css/documentation.css b/webapp/crashstats/documentation/static/documentation/css/documentation.css
index 30086d4426..8987f99c70 100644
--- a/webapp/crashstats/documentation/static/documentation/css/documentation.css
+++ b/webapp/crashstats/documentation/static/documentation/css/documentation.css
@@ -5,26 +5,31 @@
 .panel {
   font-size: 14px;
   line-height: 1.42857143;
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 .panel nav ul {
   display: block;
   margin: 10px;
 }
+
 .panel nav ul li {
   display: inline-block;
   margin: 0 3px;
   padding: 0;
 }
+
 .panel p {
   margin: 0 0 10px;
 }
+
 .panel h1,
 .panel h2,
 .panel h3 {
   margin-top: 30px;
   margin-bottom: 10px;
 }
+
 .panel table {
   background-color: transparent;
   width: 100%;
@@ -32,76 +37,90 @@
   margin-bottom: 20px;
   table-layout: fixed;
 }
+
 .panel table caption {
   padding-top: 8px;
   padding-bottom: 8px;
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
-.panel table thead > tr > th {
+
+.panel table thead>tr>th {
   vertical-align: bottom;
 }
+
 .panel table td,
 .panel table th {
   padding: 8px;
   vertical-align: top;
 }
+
 .panel ol {
   margin-top: 0;
   margin-bottom: 10px;
 }
+
 .panel ol li {
   list-style: decimal inside;
   padding-left: 1em;
 }
+
 .panel ol li ol {
   margin-bottom: 0;
 }
+
 .panel div.field-example {
-  background-color: #f2f6f9;
-  border: 1px solid #d7d7db;
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
   border-radius: 3px;
   margin: 0.5em;
   word-break: break-all;
 }
+
 .panel div.field-example code {
   margin: 0;
   padding: 0;
   border: 0;
 }
+
 .panel ul {
   margin-top: 0;
   margin-bottom: 10px;
   list-style: disc inside;
 }
+
 .panel ul li {
   list-style: disc inside;
   padding-left: 10px;
 }
+
 .panel ul li ul {
   list-style: circle inside;
   margin-left: 15px;
   margin-bottom: 0;
 }
+
 .panel code {
-  background-color: #f2f6f9;
-  border: 1px solid #d7d7db;
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
   border-radius: 3px;
   margin: 0 2px;
   padding: 1px 5px;
   white-space: nowrap;
 }
+
 .panel pre {
   display: block;
   padding: 9.5px;
   margin: 0 0 10px;
   font-size: 13px;
-  color: #4a4a4f;
+  color: var(--dark-grey);
   word-break: break-all;
   word-wrap: break-word;
-  background-color: #f2f6f9;
-  border: 1px solid #d7d7db;
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
   border-radius: 4px;
 }
+
 .panel pre code {
   padding: 0;
   font-size: inherit;
@@ -111,37 +130,44 @@
   border-radius: 0;
   border: none;
 }
+
 .panel pre code .http-verb {
-  color: #002275;
+  color: var(--primary-dark);
   font-weight: bold;
 }
+
 .panel pre code .url-domain {
-  color: #0060df;
+  color: var(--primary);
 }
+
 .panel pre code .query-string {
-  color: #002275;
+  color: var(--primary-dark);
   font-weight: bold;
 }
+
 .panel .example {
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   border-radius: 4px;
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
   margin-bottom: 10px;
 }
+
 .panel .example::before {
   content: url('../../img/3rdparty/silk/bricks.png') ' Example';
   display: block;
-  background-color: #4a4a4f;
+  background-color: var(--dark-grey);
   color: #ffffff;
   font-weight: bold;
   padding: 4px 10px;
 }
+
 .panel .example pre {
   border: none;
   margin: 0;
 }
+
 .panel .example button.try {
-  background-color: #12bc00;
+  background-color: var(--green);
   background-image: none;
   border: none;
   box-shadow: none;
@@ -152,29 +178,34 @@
   margin: 0;
   min-width: 0;
 }
+
 .panel .example .results {
-  background-color: #0f1126;
+  background-color: var(--black);
   border-top: 1px solid #999;
 }
+
 .panel .example .results .loader {
   background-image: url('../../img/ajax-loader16x16.gif');
   height: 16px;
   margin: auto;
   width: 16px;
 }
+
 .panel .example .results .jsonview {
   padding: 5px 10px;
   overflow: auto;
   max-height: 400px;
 }
+
 .panel .example .results h2 {
-  background-color: #4a4a4f;
+  background-color: var(--dark-grey);
   color: #ffffff;
   font-size: 1em;
   font-weight: bold;
   padding: 4px 10px;
   margin: 0;
 }
+
 .panel .example .results h2 .hide {
   background-image: url('../../img/3rdparty/silk/cross.png');
   cursor: pointer;
@@ -186,58 +217,72 @@
   text-indent: -9999px;
   width: 16px;
 }
+
 .panel .examples p {
-  border-left: 2px solid #d7d7db;
+  border-left: 2px solid var(--light-grey);
   padding-left: 10px;
 }
+
 .parameter header h1 {
   font-size: 1.4em;
 }
+
 .parameter header .default,
 .parameter header .type {
   font-style: italic;
 }
+
 .parameter header .default:before {
   color: grey;
   font-style: normal;
   content: ' - default: ';
 }
+
 .parameter .operators,
 .parameter .permissions {
   font-style: italic;
 }
+
 .parameter .operators:before,
 .parameter .permissions:before {
   color: grey;
   font-style: normal;
 }
+
 .parameter .permissions:before {
   content: 'Requires permissions: ';
 }
+
 .parameter .operators:before {
   content: 'Operators: ';
 }
-.parameter + .parameter {
-  border-top: 1px solid #d7d7db;
+
+.parameter+.parameter {
+  border-top: 1px solid var(--light-grey);
   padding-top: 10px;
 }
+
 .list-of-fields li {
   display: inline-block;
   padding-right: 10px;
 }
+
 ul.main-links {
   text-align: center;
 }
+
 ul.main-links li {
   background-color: #ffffff;
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   display: inline-block;
   margin: 10px;
   padding: 0;
 }
+
 ul.main-links li:hover {
-  background-color: #f2f6f9;
+  background-color: var(--off-white);
 }
+
 ul.main-links li a {
   display: inline-block;
   font-size: 1.2em;
@@ -245,9 +290,10 @@ ul.main-links li a {
   line-height: 140px;
   padding: 0 40px;
 }
+
 #table-of-content {
   background-color: #ffffff;
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   border-radius: 4px;
   float: right;
   margin: 8px 8px 20px 30px;
@@ -255,13 +301,16 @@ ul.main-links li a {
   max-width: 300px;
   min-width: 20%;
 }
+
 #table-of-content h2 {
   margin-top: 0px;
 }
+
 .rst {
   max-width: 70em;
 }
+
 .rst .section {
-  border-left: 5px solid #d7d7db;
+  border-left: 5px solid var(--light-grey);
   padding-left: 1em;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/settings/bundles.py b/webapp/crashstats/settings/bundles.py
index af671cfb44..11a1fecfbc 100644
--- a/webapp/crashstats/settings/bundles.py
+++ b/webapp/crashstats/settings/bundles.py
@@ -92,7 +92,7 @@
         "output_filename": "css/metricsgraphics.min.css",
     },
     "crashstats_base": {
-        "source_filenames": ("crashstats/css/base.css", "status/css/status.css"),
+        "source_filenames": ("crashstats/css/base/variables.css", "crashstats/css/base.css", "status/css/status.css"),
         "output_filename": "css/crashstats-base.min.css",
     },
     "api_documentation": {
diff --git a/webapp/crashstats/signature/static/signature/css/signature_report.css b/webapp/crashstats/signature/static/signature/css/signature_report.css
index 2c25356255..f2488d598b 100644
--- a/webapp/crashstats/signature/static/signature/css/signature_report.css
+++ b/webapp/crashstats/signature/static/signature/css/signature_report.css
@@ -5,52 +5,63 @@
 .page-heading p time {
   font-weight: bold;
 }
+
 #panels-nav {
   display: block;
   margin: 20px 0 0 20px;
 }
+
 #panels-nav .tabs li {
   display: inline-block;
 }
+
 #panels-nav .tabs li a:link,
 #panels-nav .tabs li a:visited {
   display: inline-block;
-  background-color: rgba(12, 12, 13, 0.2);
+  background-color: var(--alpha-grey2);
   border: none;
-  color: #4a4a4f;
+  color: var(--dark-grey);
   font-size: 1.1em;
   padding: 0.3em 0.8em;
   text-decoration: none;
   text-align: center;
   border-radius: 8px 8px 0 0;
 }
+
 #panels-nav .tabs li a:hover {
-  background-color: #b1b1b3;
+  background-color: var(--grey);
 }
+
 #panels-nav .tabs li a.selected {
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
 }
+
 /* By default, hide all panels except the loading one and panels inside a panel. */
 .panel {
   display: none;
 }
+
 .panel .panel,
 #loading-panel {
   display: block;
 }
+
 #mainbody .tab-panel {
   margin-top: 0;
   position: relative;
 }
-#mainbody .tab-panel > header {
+
+#mainbody .tab-panel>header {
   display: none;
 }
+
 .display-toggle-filters {
   float: right;
   font-style: normal;
   font-weight: bold;
 }
+
 .display-toggle-filters:before {
   content: url('../../img/3rdparty/silk/arrow_bottom.png');
   display: inline-block;
@@ -59,42 +70,52 @@
   vertical-align: middle;
   width: 16px;
 }
+
 .display-toggle-filters.show:before {
   content: url('../../img/3rdparty/silk/resultset_next.png');
 }
+
 #search-params-fieldset {
   width: 100%;
 }
+
 th.crash-id {
   min-width: 235px;
 }
+
 a.crash-id {
   font-family: monospace;
 }
+
 .controls {
   text-align: center;
   position: relative;
 }
+
 .controls button {
   cursor: pointer;
   margin-left: 1em;
   padding: 0.7em 1em;
   vertical-align: middle;
 }
+
 .controls hr {
-  background-color: #d7d7db;
-  border-color: #d7d7db;
-  color: #d7d7db;
+  background-color: var(--light-grey);
+  border-color: var(--light-grey);
+  color: var(--light-grey);
   margin-top: 15px;
   width: 60%;
 }
+
 .reports-panel .controls input {
   width: 800px;
 }
-section.aggregations-panel > .body > .content.loaded,
-section.summary-panel > .body > .content.loaded {
+
+section.aggregations-panel>.body>.content.loaded,
+section.summary-panel>.body>.content.loaded {
   column-count: 2;
 }
+
 section.aggregations-panel .panel,
 section.summary-panel .panel {
   display: inline-block;
@@ -103,6 +124,7 @@ section.summary-panel .panel {
   margin-left: 2.4%;
   margin-right: 2.4%;
 }
+
 section.aggregations-panel .controls .loader,
 section.summary-panel .controls .loader {
   background-image: url('../../img/ajax-loader16x16.gif');
@@ -113,78 +135,97 @@ section.summary-panel .controls .loader {
   right: 0;
   width: 16px;
 }
+
 section.aggregations-panel .controls .fields-list,
 section.summary-panel .controls .fields-list {
   width: 30%;
 }
+
 section.aggregations-panel .crash-type-indicators-panel,
 section.summary-panel .crash-type-indicators-panel {
-  background-color: rgba(12, 12, 13, 0.1);
+  background-color: var(--alpha-grey1);
   padding: 15px;
 }
+
 section.aggregations-panel .crash-type-indicators-panel.startup-crash-warning,
 section.summary-panel .crash-type-indicators-panel.startup-crash-warning {
   background-color: #ffe900;
 }
+
 section.aggregations-panel .crash-type-indicators-panel .crash-type-indicator-container,
 section.summary-panel .crash-type-indicators-panel .crash-type-indicator-container {
   align-items: center;
   display: flex;
 }
+
 section.aggregations-panel .crash-type-indicators-panel .crash-type-indicator-container img,
 section.summary-panel .crash-type-indicators-panel .crash-type-indicator-container img {
   margin-right: 5px;
 }
+
 section.summary-panel .panel header {
   cursor: pointer;
 }
+
 section.summary-panel .panel .content {
   display: none;
 }
+
 section.graphs-panel .controls .fields-list {
   width: 30%;
 }
+
 section.graphs-panel .legend {
   width: 100%;
   text-align: center;
 }
+
 section.correlations-panel .controls .products-list,
 section.correlations-panel .controls .channels-list {
   width: 15%;
 }
+
 section.correlations-panel .controls .products-list {
   margin-right: 5em;
 }
+
 section.correlations-panel .controls label {
   margin-right: 0.2em;
 }
+
 .tab-inner-panel .options {
   display: block;
   height: 16px;
   text-indent: -9999px;
   width: 16px;
 }
+
 .tab-inner-panel .options.delete {
   background-image: url('/static/img/3rdparty/silk/cross.png');
   position: relative;
   top: 1px;
 }
+
 .tab-inner-panel .options.show {
   background-image: url('/static/img/3rdparty/silk/resultset_previous.png');
 }
+
 .tab-inner-panel .options.hide {
   background-image: url('/static/img/3rdparty/silk/arrow_bottom.png');
 }
+
 .tab-inner-panel .options:hover {
   cursor: pointer;
 }
+
 .tab-inner-panel .body {
   margin: 1em 0 0;
   padding: 0;
 }
+
 .bugzilla-panel .bug_ids_expanded_list {
   border: none;
   display: block;
   position: inherit;
   width: 100%;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/status/static/status/css/status.css b/webapp/crashstats/status/static/status/css/status.css
index 0b52969e83..5d4e16ccc3 100644
--- a/webapp/crashstats/status/static/status/css/status.css
+++ b/webapp/crashstats/status/static/status/css/status.css
@@ -5,7 +5,7 @@
 /* Photon Colors Less Variables v3.0.1 */
 .status-message {
   position: relative;
-  background-color: #d7d7db;
+  background-color: var(--light-grey);
   border: none;
   color: #ffffff;
   font-size: 1.1em;
@@ -26,7 +26,7 @@
   color: #0c0c0d;
 }
 .status-message.severity-info a {
-  color: #0a84ff;
+  color: var(--primary-medium);
 }
 .status-message.severity-info:before {
   content: url("/static/img/3rdparty/silk/information.png");
@@ -36,13 +36,13 @@
   color: #3e2800;
 }
 .status-message.severity-warning a {
-  color: #0a84ff;
+  color: var(--primary-medium);
 }
 .status-message.severity-warning:before {
   content: url("/static/img/3rdparty/silk/error.png");
 }
 .status-message.severity-critical {
-  background-color: #d70022;
+  background-color: var(--red);
 }
 .status-message.severity-critical,
 .status-message.severity-critical a {
diff --git a/webapp/crashstats/supersearch/static/supersearch/css/search.css b/webapp/crashstats/supersearch/static/supersearch/css/search.css
index a0ec91cf80..0f98cbe032 100644
--- a/webapp/crashstats/supersearch/static/supersearch/css/search.css
+++ b/webapp/crashstats/supersearch/static/supersearch/css/search.css
@@ -3,59 +3,72 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 #search-form {
-  background: #d7d7db;
+  background: var(--light-grey);
   margin-top: 1em;
   padding: 2em;
   /* By default hide all elements of the search form until it is fully loaded. */
 }
+
 #search-form form {
   display: none;
 }
+
 #search-form .form-controls {
   float: right;
 }
+
 #search-form .form-controls button {
   cursor: pointer;
   padding: 6px 15px;
   font-size: 1.2em;
 }
+
 #search-form .form-controls button:before {
   padding-right: 8px;
   vertical-align: middle;
 }
+
 #search-form .form-controls #search-button:before {
   content: url("/static/img/3rdparty/silk/magnifier.png");
 }
+
 #search-form .form-controls .new-line:before {
   content: url("/static/img/3rdparty/silk/application_form_add.png");
 }
+
 #search-form .form-controls .customize:before {
   content: url("/static/img/3rdparty/silk/wrench.png");
 }
+
 #search-form #simple-search,
 #search-form .date-filters {
   text-align: center;
   justify-content: space-between;
 }
-#search-form #simple-search > div,
-#search-form .date-filters > div {
+
+#search-form #simple-search>div,
+#search-form .date-filters>div {
   width: 24%;
   display: inline-block;
 }
-#search-form #simple-search > div label,
-#search-form .date-filters > div label {
+
+#search-form #simple-search>div label,
+#search-form .date-filters>div label {
   display: block;
   font-weight: bold;
 }
+
 #search-form .date-filters {
   float: left;
   margin: 0;
   padding-bottom: 0px;
   width: 49.33%;
 }
-#search-form .date-filters > div {
+
+#search-form .date-filters>div {
   width: 48.66%;
 }
+
 #search-form .date-shortcuts {
   clear: left;
   font-style: italic;
@@ -63,26 +76,33 @@
   text-align: center;
   width: 49.33%;
 }
+
 #search-form .date-shortcuts a {
-  color: #4a4a4f;
+  color: var(--dark-grey);
 }
+
 #search-form .date-shortcuts a.selected {
   text-decoration: none;
 }
+
 #search-form fieldset {
   padding: 10px 0;
   width: 100%;
 }
+
 #search-form fieldset .select2-container {
   margin-right: 10px;
 }
+
 #search-form select {
   margin: 20px;
   width: 20em;
 }
+
 #search-form .value {
   width: 30em;
 }
+
 #search-form .dynamic-line-delete {
   float: left;
   display: inline-block;
@@ -93,91 +113,113 @@
   width: 16px;
   text-indent: -9999px;
 }
+
 #search-form #advanced-search fieldset fieldset {
-  border-top: 1px solid #d7d7db;
+  border-top: 1px solid var(--light-grey);
 }
+
 #search-form fieldset.options h4 {
   cursor: pointer;
 }
+
 #search-form fieldset.options h4 span {
-  color: #4a4a4f;
+  color: var(--dark-grey);
   text-transform: uppercase;
   font-size: 0.7em;
   font-weight: bold;
 }
+
 #search-form fieldset.options h4 .hide {
   display: none;
 }
-#search-form fieldset.options h4 + div {
+
+#search-form fieldset.options h4+div {
   display: none;
 }
+
 #search-form fieldset.options label {
   display: inline-block;
   min-width: 100px;
 }
+
 #search-form fieldset.options input[name=_facets],
 #search-form fieldset.options input[name=_sort],
 #search-form fieldset.options input[name=_columns_fake] {
   display: inline;
   width: 500px;
 }
+
 #search-form fieldset.options input[name=search_indices] {
   display: inline;
   width: 80%;
 }
+
 #search-form fieldset.options div.public-api-url {
   margin: 10px 0;
 }
+
 #search-form fieldset.options input[name=_public_api_url] {
   padding: 5px 8px;
   width: 100%;
 }
+
 #search-form textarea {
   height: 300px;
   width: 600px;
 }
+
 #search_results table caption {
   font-size: 1.7rem;
   margin: 0 0 1em 0;
 }
+
 #search_results .external-link {
   background: transparent url("/static/img/icons/external.png") left top no-repeat;
   display: inline-block;
   padding-left: 17px;
 }
+
 #search_results .term {
   background: transparent url("/static/img/icons/add.png") left top no-repeat;
   display: inline-block;
   padding-left: 13px;
 }
+
 #search_results th.crash-id {
   width: 235px;
 }
+
 #search_results a.crash-id {
   font-family: monospace;
 }
+
 #search_results .error li {
-  color: #0f1126;
+  color: var(--black);
   font-weight: bold;
   list-style: inside none disc;
 }
+
 #search_results .error li li {
   font-weight: normal;
   list-style: inside none circle;
   margin-left: 20px;
 }
+
 .facet .column-narrow {
   width: 10%;
 }
+
 .facet .facet-term {
   width: 50%;
 }
+
 .loader {
   background-image: url("/static/img/ajax-loader.gif");
   height: 19px;
   margin: auto;
   width: 220px;
 }
+
 /* Custom Query styles */
 .custom-search #editor {
   border: 1px solid lightgray;
@@ -185,20 +227,23 @@
   margin: 0;
   width: 100%;
 }
+
 .custom-search fieldset.options input#search_indices {
   width: 100%;
 }
+
 .custom-search .json-results {
   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
-  font-size: 12px;
+  font-size: var(--base-font-size);
   height: 500px;
   width: 100%;
 }
+
 .custom-search code {
-  background-color: #f2f6f9;
-  border: 1px solid #d7d7db;
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
   border-radius: 3px;
   margin: 0 2px;
   padding: 1px 5px;
   white-space: nowrap;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/tokens/static/tokens/css/home.css b/webapp/crashstats/tokens/static/tokens/css/home.css
index 808cedeb82..6a0df698f3 100644
--- a/webapp/crashstats/tokens/static/tokens/css/home.css
+++ b/webapp/crashstats/tokens/static/tokens/css/home.css
@@ -3,47 +3,57 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* Photon Colors Less Variables v3.0.1 */
 .errorlist {
-  color: #d70022;
+  color: var(--red);
 }
+
 textarea {
   height: 60px;
   width: 400px;
 }
+
 code,
 pre {
-  background-color: #d7d7db;
-  border: 1px solid #b1b1b3;
+  background-color: var(--light-grey);
+  border: 1px solid var(--grey);
 }
+
 p.code code {
   font-size: 1.5em;
   padding: 6px;
 }
+
 p.example code,
 pre.example {
   font-size: 1.2em;
   padding: 4px;
 }
+
 pre {
   line-height: 1.3em;
 }
+
 p.code .rest-hidden {
   display: none;
 }
+
 div.token {
-  border-bottom: 1px solid #b1b1b3;
+  border-bottom: 1px solid var(--grey);
   padding: 25px 5px;
 }
+
 table.meta-data th {
   vertical-align: top;
 }
+
 table.meta-data th,
 table.meta-data td {
   padding: 2px 6px;
   border: 0;
 }
+
 .is-expired {
-  color: #d70022;
+  color: var(--red);
   font-weight: bold;
   font-size: 110%;
   margin: 5px;
-}
+}
\ No newline at end of file
diff --git a/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css b/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css
index bb47b7283e..8e1aa7fae5 100644
--- a/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css
+++ b/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css
@@ -7,46 +7,56 @@
   font-weight: normal;
   clear: both;
 }
+
 #topcrashers table {
   margin: 0.3em 0 0.5em;
-  border: 1px solid #d7d7db;
+  border: 1px solid var(--light-grey);
   width: 95%;
 }
+
 #topcrashers th {
   background: url("/static/img/slate/white-grad.png") repeat-x scroll bottom left #ffffff;
   padding: 0.1em 0.5em;
 }
+
 #topcrashers td {
   padding: 0.5em;
 }
+
 #topcrashers .sig {
   overflow: hidden;
   white-space: nowrap;
 }
+
 #topcrashers .count {
   text-align: center;
 }
+
 .signature-icons {
   float: right;
 }
+
 /* duration and os selectors on top crashers */
 .tc-selector-heading {
   margin-right: 0.7em;
   font-weight: bold;
 }
-.tc-filters-block + ul {
+
+.tc-filters-block+ul {
   clear: both;
 }
+
 .tc-filter {
   float: left;
   margin: 0.3em 1em 1em 0;
   padding: 0;
 }
+
 .tc-filter a:link,
 .tc-filter a:visited {
   display: inline-block;
-  background-color: #d7d7db;
-  color: #4a4a4f;
+  background-color: var(--light-grey);
+  color: var(--dark-grey);
   margin-right: 0.2em;
   padding: 0.3em;
   min-width: 65px;
@@ -54,27 +64,33 @@
   text-align: center;
   border-radius: 6px;
 }
+
 .tc-filter a:hover {
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
 }
+
 .tc-filter a.selected {
-  background-color: #0060df;
+  background-color: var(--primary);
   color: #ffffff;
 }
+
 .tc-filter li {
   display: inline;
 }
+
 .tc-duration-days a:link,
 .tc-result-count a:link,
 .tc-duration-days a:visited,
 .tc-result-count a:visited {
   min-width: 30px;
 }
+
 #buildid-graph {
   width: 600px;
   height: 200px;
 }
+
 /* top crashers no results */
 .no-results {
   clear: both;
@@ -83,36 +99,45 @@
   margin: 0 auto 1em;
   text-align: center;
   width: 50%;
-  -webkit-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  -moz-box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
-  box-shadow: 0px 1px 4px 0 rgba(12, 12, 13, 0.1);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
 }
+
 .no-results time {
   font-weight: 900;
 }
+
 .hide {
   display: none;
 }
+
 .startup {
   margin-right: 1px;
 }
+
 #signature-list {
   clear: both;
 }
+
 #signature-list button {
   float: right;
 }
+
 #signature-list td {
   width: 4%;
 }
+
 #signature-list td.signature-column {
   width: 32%;
 }
+
 .signature-popup {
   background-color: #ffffff;
   border: solid 1px #AAA;
   width: auto;
 }
+
 .signature-preview {
   float: left;
   display: block;
@@ -120,6 +145,7 @@
   overflow: hidden;
   white-space: nowrap;
 }
+
 .moving-up,
 .moving-down {
   position: absolute;
@@ -134,14 +160,17 @@
   -moz-border-radius: 6px 0 0 6px;
   border-radius: 6px 0 0 6px;
 }
+
 .moving-up {
-  background: #d70022 url("../../img/up_arrow.png") 9px 4px no-repeat;
+  background: var(--red) url("../../img/up_arrow.png") 9px 4px no-repeat;
 }
+
 .moving-down {
-  background: #12bc00 url("../../img/down_arrow.png") 9px 4px no-repeat;
+  background: var(--green) url("../../img/down_arrow.png") 9px 4px no-repeat;
 }
+
 .label {
-  background-color: #ff9c9c;
+  background-color: var(--pink);
   border-radius: 4px;
   padding: 2px 4px;
-}
+}
\ No newline at end of file