/** @format */

// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
$black: #000;
$dark-gray-900: #191e23;
$dark-gray-800: #23282d;
$dark-gray-700: #32373c;
$dark-gray-600: #40464d;
$dark-gray-500: #555d66; // Use this most of the time for dark items.
$dark-gray-400: #606a73;
$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
$dark-gray-200: #7e8993;
$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
$dark-gray-100: #8f98a1;
$light-gray-900: #a2aab2;
$light-gray-800: #b5bcc2;
$light-gray-700: #ccd0d4;
$light-gray-600: #d7dade;
$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
$light-gray-300: #edeff0;
$light-gray-200: #f3f4f5;
$light-gray-100: #f8f9f9;
$white: #fff;

// Dark opacities, for use with light themes.
$dark-opacity-900: rgba(#000510, 0.9);
$dark-opacity-800: rgba(#00000a, 0.85);
$dark-opacity-700: rgba(#06060b, 0.8);
$dark-opacity-600: rgba(#000913, 0.75);
$dark-opacity-500: rgba(#0a1829, 0.7);
$dark-opacity-400: rgba(#0a1829, 0.65);
$dark-opacity-300: rgba(#0e1c2e, 0.62);
$dark-opacity-200: rgba(#162435, 0.55);
$dark-opacity-100: rgba(#223443, 0.5);
$dark-opacity-light-900: rgba(#304455, 0.45);
$dark-opacity-light-800: rgba(#425863, 0.4);
$dark-opacity-light-700: rgba(#667886, 0.35);
$dark-opacity-light-600: rgba(#7b86a2, 0.3);
$dark-opacity-light-500: rgba(#9197a2, 0.25);
$dark-opacity-light-400: rgba(#95959c, 0.2);
$dark-opacity-light-300: rgba(#829493, 0.15);
$dark-opacity-light-200: rgba(#8b8b96, 0.1);
$dark-opacity-light-100: rgba(#747474, 0.05);

// Light opacities, for use with dark themes.
$light-opacity-900: rgba($white, 1);
$light-opacity-800: rgba($white, 0.9);
$light-opacity-700: rgba($white, 0.85);
$light-opacity-600: rgba($white, 0.8);
$light-opacity-500: rgba($white, 0.75);
$light-opacity-400: rgba($white, 0.7);
$light-opacity-300: rgba($white, 0.65);
$light-opacity-200: rgba($white, 0.6);
$light-opacity-100: rgba($white, 0.55);
$light-opacity-light-900: rgba($white, 0.5);
$light-opacity-light-800: rgba($white, 0.45);
$light-opacity-light-700: rgba($white, 0.4);
$light-opacity-light-600: rgba($white, 0.35);
$light-opacity-light-500: rgba($white, 0.3);
$light-opacity-light-400: rgba($white, 0.25);
$light-opacity-light-300: rgba($white, 0.2);
$light-opacity-light-200: rgba($white, 0.15);
$light-opacity-light-100: rgba($white, 0.1);

// Additional colors.
// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
$blue-wordpress-700: #00669b;
$blue-dark-900: #0071a1;

$blue-medium-900: #006589;
$blue-medium-800: #00739c;
$blue-medium-700: #007fac;
$blue-medium-600: #008dbe;
$blue-medium-500: #00a0d2;
$blue-medium-400: #33b3db;
$blue-medium-300: #66c6e4;
$blue-medium-200: #bfe7f3;
$blue-medium-100: #e5f5fa;
$blue-medium-highlight: #b3e7fe;
$blue-medium-focus: #007cba;

// Alert colors.
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;

// Primary Accent (Blues)
$blue-wordpress: #0087be;
$blue-light: #78dcfa;
$blue-medium: #00aadc;
$blue-dark: #005082;
$blue-500: #016087;

// Grays
$gray: #87a6bc;
$gray-light: lighten($gray, 33%); //#f3f6f8
$gray-dark: darken($gray, 38%); //#2e4453
$gray-900: #1a1a1a;

// $gray-text: ideal for standard, non placeholder text
// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
$gray-text: $gray-dark;
$gray-text-min: darken($gray, 18%); //#537994

// Shades of gray
$gray-lighten-10: lighten($gray, 10%); // #a8bece
$gray-lighten-20: lighten($gray, 20%); // #c8d7e1
$gray-lighten-30: lighten($gray, 30%); // #e9eff3
$gray-darken-10: darken($gray, 10%); // #668eaa
$gray-darken-20: darken($gray, 20%); // #4f748e
$gray-darken-30: darken($gray, 30%); // #3d596d

//
// See wordpress.com/design-handbook/colors/ for more info.

// Secondary Accent (Oranges)
$orange-jazzy: #f0821e;
$orange-fire: #d54e21;

// Alerts
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;
$alert-purple: #855da6;
$red-40: #e65054;

// Custom
$toolbar-button: #7b9ab1;
$toolbar-button-disabled: $gray-lighten-30;

$background-dark-elevated: #2e2e2e;
$background-dark-secondary: #1e2327;

// Primary tint color (light)
$blue-50: #2271b1;
// Primary tint color (dark)
$blue-30: #5198d9;

$button-default-bg: #2271b1;
$button-fallback-bg: #595959;

// color-studio
$gray-0: #f6f7f7;
$gray-5: #dcdcde;
$gray-10: #c3c4c7;
$gray-20: #a7aaad;
$gray-30: #8e9196;
$gray-40: #787c82;
$gray-50: #646970;
$gray-60: #50575e;
$gray-70: #3c434a;
$gray-90: #1d2327;
$gray-95: #1d2327;
$gray-100: #101517;

// neutral (light) - black is a base color in light mode
$light-primary: #000d; //rgba(0, 0, 0, 0.87);
$light-secondary: #0009; //rgba(0, 0, 0, 0.6);
$light-tertiary: #0000006d; //rgba(0, 0, 0, 0.43);
$light-quaternary: #0000003f; //rgba(0, 0, 0, 0.25);
$light-dim: #0000001e; //rgba(0, 0, 0, 0.12);
$light-ultra-dim: #0000000a; //rgba(0, 0, 0, 0.04);

// neutral (dark) - white is a base color in dark mode
$dark-primary: #fffd; //rgba(255, 255, 255, 0.87);
$dark-secondary: #fff9; //rgba(255, 255, 255, 0.6);
$dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43);
$dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25);
$dark-dim: #ffffff26; //rgba(255, 255, 255, 0.15);
$dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);