$transparent: rgba(255, 255, 255, 0);

$gray-text: $gray-700;
$gray-text-hover: $gray-900;

// Gutenberg
$button-hover: #fafafa;
$button-hover-border: #999;
$button-disabled: #a0a5aa;
$button-disabled-border: #ddd;
$button-focus-inner: #00435d;
$button-focus-outer: #bfe7f3;
$input-active-border: #00a0d2;
$input-active-inner: $button-focus-inner;
$input-active-outer: $button-focus-outer;
$table-border: #e2e4e7;

// Bright colors
$valid-green: #4ab866;
$notice-yellow: #ffb900;
$error-red: #d94f4f;
$box-shadow-blue: #5b9dd9;
$core-orange: #ca4a1f;

$button: #f0f2f4;
$button-border: darken($button, 20%);

// Blues
$core-blue-dark-900: #0071a1;

// WooCommerce brand colors
$woocommerce-brand-purple: #3c2861;

$fallback-gutter: 24px;
$fallback-gutter-large: 40px;
$gutter: var(--main-gap);
$gutter-large: var(--large-gap);

$gap-largest: 40px;
$gap-larger: 36px;
$gap-large: 24px;
$gap: 16px;
$gap-small: 12px;
$gap-smaller: 8px;
$gap-smallest: 4px;

// Header
$header-height: 60px;
$header-scroll-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);

// Sidebar
$sidebar-width: 272px;

// @todo Remove this spacing variable
$spacing: 16px;

// Gutenberg variable overrides.
$white: $studio-white;
$black: $studio-black;
$alert-red: $error-red;
$alert-yellow: $notice-yellow;
$alert-green: $valid-green;

// WordPress defaults
$adminbar-height: 32px;
$adminbar-height-mobile: 46px;

// wp-admin colors
$wp-admin-background: #f1f1f1;
$wp-admin-sidebar: #24292d;

// Muriel
$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12);
$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2),
0 1px 18px rgba(0, 0, 0, 0.12),
0 6px 10px rgba(0, 0, 0, 0.14);
$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);

$breakpoints: 320px,
400px,
600px,
782px,
960px,
1280px,
1440px;