// http://design.firefox.com/photon/visuals/color.html

// Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop.
$photon_blue_40: #45a1ff;
$photon_blue_50: #0a84ff;
$photon_blue_60: #0060df;
$photon_blue_70: #003eaa;
$photon_blue_80: #002275;
$photon_blue_90: #000f40;

// Firefox Teal is one of our primary colors. We use teal as an attention color.
$photon_teal_50: #00feff;
$photon_teal_60: #00c8d7;
$photon_teal_70: #008ea4;
$photon_teal_80: #005a71;
$photon_teal_90: #002d3e;

// Firefox Magenta is one of our primary colors. We currently have no common usage for it.
$photon_magenta_50: #ff1ad9;
$photon_magenta_60: #ed00b5;
$photon_magenta_70: #b5007f;
$photon_magenta_80: #7d004f;
$photon_magenta_90: #440027;

// Firefox Green is commonly used to indicate success.
$photon_green_50: #30e60b;
$photon_green_60: #12bc00;
$photon_green_70: #058b00;
$photon_green_80: #006504;
$photon_green_90: #003706;

// Firefox Yellow is commonly used for warnings.
$photon_yellow_50: #ffe900;
$photon_yellow_60: #d7b600;
$photon_yellow_70: #a47f00;
$photon_yellow_80: #715100;
$photon_yellow_90: #3e2800;

// Firefox Red is commonly used for errors.
$photon_red_50: #ff0039;
$photon_red_60: #d70022;
$photon_red_70: #a4000f;
$photon_red_80: #5a0002;
$photon_red_90: #3e0200;

// Firefox Purple is commonly used to indicate privacy.
$photon_purple_50: #9400ff;
$photon_purple_60: #8000d7;
$photon_purple_70: #6200a4;
$photon_purple_80: #440071;
$photon_purple_90: #25003e;

// Firefox Orange is only used for branding. Do not use it otherwise.
$photon_orange_50: #ff9400;
$photon_orange_60: #d76e00;
$photon_orange_70: #a44900;
$photon_orange_80: #712b00;
$photon_orange_90: #3e1300;

// Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme).
$photon_ink_70: #363959;
$photon_ink_80: #202340;
$photon_ink_90: #0f1126;

// Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme).
$photon_grey_10: #f9f9fa;
$photon_grey_20: #ededf0;
$photon_grey_30: #d7d7db;
$photon_grey_40: #b1b1b3;
$photon_grey_50: #737373;
$photon_grey_60: #4a4a4f;
$photon_grey_70: #38383d;
$photon_grey_80: #2a2a2e;
$photon_grey_90: #0c0c0d;

// We use white for the background of doorhangers or in-content menus.
$photon_white: #ffffff;

div.column {
	  flex-grow: 1;
}