// Colors.
$black: rgba(0, 0, 0, 0.8);
$lightgray: rgba(0, 0, 0, 0.15);
$gray: rgba(0, 0, 0, 0.52);

//Accordion.
$accordion-border-radius: 4px;
$accordion-background: #eee;

// Gutenberg Vars.

// Hugo's new WordPress shades of gray
// from http://codepen.io/hugobaeta/pen/grJjVp
$black: #222;
$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;
$dark-gray-200: #7e8993;
$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;
$light-gray-300: #edeff0;
$light-gray-200: #f3f4f5;
$light-gray-100: #f8f9f9;
$white: #fff;

// Additional colors
// some from https://make.wordpress.org/design/handbook/foundations/colors/
$blue-wordpress-700: #00669b;
$blue-wordpress: #0073aa;
$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;

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

// Fonts & basics
$default-font: -apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif;
$default-font-size: 13px;
$default-line-height: 1.4;
$editor-font: "Noto Serif", serif;
$editor-html-font: menlo, consolas, monaco, monospace;
$editor-font-size: 16px;
$text-editor-font-size: 14px;
$editor-line-height: 1.8;
$big-font-size: 18px;
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"

// Widths, heights & dimensions
$item-spacing: 10px;
$panel-padding: 16px;
$header-height: 56px;
$panel-header-height: 50px;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
$admin-sidebar-width-big: 190px;
$admin-sidebar-width-collapsed: 36px;

// Visuals
$shadow-popover: 0 3px 20px rgba($dark-gray-900, 0.1), 0 1px 3px rgba($dark-gray-900, 0.1);
$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1);

// Editor Widths
$sidebar-width: 280px;
$text-editor-max-width: 760px;	// @todo: merge with variable below
$content-width: 636px;	// @todo: leverage theme $content_width variable

// Block UI
$block-controls-height: 36px;
$icon-button-size: 36px;
$icon-button-size-small: 24px;
$inserter-tabs-height: 36px;
$block-toolbar-height: 37px;

// Blocks
$block-padding: 14px;
$block-mover-margin: 18px;
$block-spacing: 4px;
$block-side-ui-padding: 36px;
$block-side-ui-width: 28px; // The side UI max height matches a single line of text, 56px. 28px is half, allowing 2 mover arrows
$block-side-ui-clearance: 2px;

// Buttons & UI Widgets
$button-style__radius-roundrect: 4px;
$button-style__radius-round: 50%;