/* ------------------------------------
 * Administration variables
 * Table of contents
 *
 * 1. Primary colors
 * 2. Status colors
 * 3. Module colors
 * 4. Generic colors
 * 5. Gradients
 * 6. Typography
 * 7. Miscellaneous
 * 8. z-index
 * 9. Global widths
 * ------------------------------------ */

/* ------------------------------------
 * 1. Primary colors
 * ------------------------------------ */

// Gray
// Color description: Grayish blue
$color-gray-50: #f9fafb;
$color-gray-100: #f0f2f5;
$color-gray-200: #e0e6eb;
$color-gray-300: #d1d9e0;
$color-gray-400: #c2ccd6;
$color-gray-500: #b3bfcc;
$color-gray-600: #a3b3c2;
$color-gray-700: #94a6b8;
$color-gray-800: #8599ad;
$color-gray-900: #758ca3;

// Darkgray
// Color description: Very dark grayish blue
$color-darkgray-50: #667f99;
$color-darkgray-100: #5c738a;
$color-darkgray-200: #52667a;
$color-darkgray-300: #47596b;
$color-darkgray-400: #3d4c5c;
$color-darkgray-500: #33404d;
$color-darkgray-600: #29333d;
$color-darkgray-700: #1f262e;
$color-darkgray-800: #14191f;
$color-darkgray-900: #0a0d0f;

// Shopware brand
// Color description: Vivid blue
$color-shopware-brand-50: #e3f3ff;
$color-shopware-brand-100: #bae2ff;
$color-shopware-brand-200: #8ccfff;
$color-shopware-brand-300: #5dbbff;
$color-shopware-brand-400: #3badff;
$color-shopware-brand-500: #189eff;
$color-shopware-brand-600: #1596ff;
$color-shopware-brand-700: #118cff;
$color-shopware-brand-800: #0e82ff;
$color-shopware-brand-900: #0870ff;

// Menu
// Color description: Very dark desaturated blue
$color-menu-start: #303a4f;
$color-menu-end: #2a3345;

/* ------------------------------------
 * 2. Status colors
 * ------------------------------------ */

// Emerald
// Color description: Moderate lime green
$color-emerald-50: #e7f9e9;
$color-emerald-100: #c3f1c8;
$color-emerald-200: #9be8a3;
$color-emerald-300: #73de7e;
$color-emerald-400: #55d762;
$color-emerald-500: #37d046;
$color-emerald-600: #31cb3f;
$color-emerald-700: #2ac437;
$color-emerald-800: #23be2f;
$color-emerald-900: #16b320;

// Pumpkin Spice
// Color description: Light orange
$color-pumpkin-spice-50: #fff3e0;
$color-pumpkin-spice-100: #ffe0b2;
$color-pumpkin-spice-200: #ffcc80;
$color-pumpkin-spice-300: #ffb74d;
$color-pumpkin-spice-400: #ffa726;
$color-pumpkin-spice-500: #ff9800;
$color-pumpkin-spice-600: #fb8c00;
$color-pumpkin-spice-700: #f57c00;
$color-pumpkin-spice-800: #ef6c00;
$color-pumpkin-spice-900: #e65100;

// Crimson
// Color description: Bright red
$color-crimson-50: #fbe5ea;
$color-crimson-100: #f5bfc9;
$color-crimson-200: #ef94a6;
$color-crimson-300: #e86982;
$color-crimson-400: #e34967;
$color-crimson-500: #de294c;
$color-crimson-600: #da2445;
$color-crimson-700: #d51f3c;
$color-crimson-800: #d11933;
$color-crimson-900: #c80f24;

/* ------------------------------------
 * 3. Module colors
 * ------------------------------------ */

// Yellow
// Color description: Pure yellow
// Marketing module
$color-module-yellow-50: #fffae0;
$color-module-yellow-100: #fff3b3;
$color-module-yellow-200: #ffeb80;
$color-module-yellow-300: #ffe34d;
$color-module-yellow-400: #ffdd26;
$color-module-yellow-500: #ffd700;
$color-module-yellow-600: #ffd300;
$color-module-yellow-700: #ffcd00;
$color-module-yellow-800: #ffc700;
$color-module-yellow-900: #ffbe00;

// Orange
// Color description: Soft orange
// Customer module
$color-module-orange-50: #fef1ec;
$color-module-orange-100: #fddcd0;
$color-module-orange-200: #fcc4b1;
$color-module-orange-300: #faac91;
$color-module-orange-400: #f99b7a;
$color-module-orange-500: #f88962;
$color-module-orange-600: #f7815a;
$color-module-orange-700: #f67650;
$color-module-orange-800: #f56c46;
$color-module-orange-900: #f35934;

// Pink
// Color description: Very light pink
// Content module
$color-module-pink-50: #fff0f8;
$color-module-pink-100: #ffdaed;
$color-module-pink-200: #ffc2e1;
$color-module-pink-300: #ffaad4;
$color-module-pink-400: #ff97cb;
$color-module-pink-500: #ff85c2;
$color-module-pink-600: #ff7dbc;
$color-module-pink-700: #ff72b4;
$color-module-pink-800: #ff68ac;
$color-module-pink-900: #ff559f;

// Blue
// Color description: Soft cyan
// Dashboard module
$color-module-blue-50: #edfafd;
$color-module-blue-100: #d2f3fb;
$color-module-blue-200: #b5ebf8;
$color-module-blue-300: #97e2f5;
$color-module-blue-400: #80dcf2;
$color-module-blue-500: #6ad6f0;
$color-module-blue-600: #62d1ee;
$color-module-blue-700: #57ccec;
$color-module-blue-800: #4dc6e9;
$color-module-blue-900: #3cbce5;

// Purple
// Color description: Very soft blue
// Order module
$color-module-purple-50: #f4f2fd;
$color-module-purple-100: #e3defb;
$color-module-purple-200: #d0c9f8;
$color-module-purple-300: #bdb3f5;
$color-module-purple-400: #aea2f2;
$color-module-purple-500: #a092f0;
$color-module-purple-600: #988aee;
$color-module-purple-700: #8e7fec;
$color-module-purple-800: #8475e9;
$color-module-purple-900: #7363e5;

// Green
// Color description: Soft cyan - lime green
// Catalog module
$color-module-green-50: #ebfaf4;
$color-module-green-100: #cdf4e3;
$color-module-green-200: #abecd1;
$color-module-green-300: #89e4bf;
$color-module-green-400: #70dfb1;
$color-module-green-500: #57d9a3;
$color-module-green-600: #4fd59b;
$color-module-green-700: #46cf91;
$color-module-green-800: #3cca88;
$color-module-green-900: #2cc077;

/* ------------------------------------
 * 4. Generic colors
 * ------------------------------------ */

$color-white: #fff;
$color-black: #000;
$color-drag-select-box: rgba(0, 162, 255, 40%);

/* ------------------------------------
 * 5. Gradients
 * ------------------------------------ */

$gradient-action-button: linear-gradient(to bottom, #7793ae 0%, #6a849c 100%);

/* ------------------------------------
 * 6. Typography
 * ------------------------------------ */

$font-family-default:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "San Francisco",
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  sans-serif;
$font-family-variables:
  "Inter var",
  -apple-system,
  BlinkMacSystemFont,
  "San Francisco",
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  sans-serif;
$font-family-default-feature-settings:
  "cv05" on,
  "cv02" on,
  "cv07" on,
  "cv04" on,
  "cv03" on;

$font-size-xxs: 12px;
$font-size-xs: 14px;
$font-size-s: 16px;
$font-size-m: 18px;
$font-size-l: 20px;
$font-size-xl: 24px;
$font-size-3xl: 28px;

$font-size-extra-small: $font-size-xxs; // @deprecated - use font-size-xxs instead
$font-size-small: $font-size-xs; // @deprecated - use font-size-xs instead
$font-size-default: $font-size-s; // @deprecated - use font-size-s instead
$font-size-large: $font-size-m; // @deprecated - use font-size-m instead

$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;
$font-weight-bold: 700;

$line-height-auto: auto;
$line-height-xs: 18px;
$line-height-sm: 20px;
$line-height-md: 24px;
$line-height-lg: 28px;

/* ------------------------------------
 * 7. Miscellaneous
 * ------------------------------------ */

$transparent-background-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEX39/f////+/v66RnnUAAAAM0lEQVQIHQXBwQ3AMAgEMC95SPRPpQxENuiete2HCqZRhWlkcV4kIIPb6MUWZpEHN+j9ARNGDXV0xoICAAAAAElFTkSuQmCC");
$asset-base-url: "/administration/static/";

/* ------------------------------------
 * 8. z-index
 * ------------------------------------ */

$z-index-loader: 400;
$z-index-overlay: 300;
$z-index-over-overlay: 350;
$z-index-drag-select-box: 100;
$z-index-sidebar: 200;
$z-index-page-header: 550;
$z-index-select-results: 600;
$z-index-flyout: 700;
$z-index-off-canvas: 750;
$z-index-search-bar-results: 800;
$z-index-mt-page-search-bar: 650;
$z-index-modal: 1000;
$z-index-context-menu: 1100;
$z-index-notifications: 1200;
$z-index-hover-image: 1300;
$z-index-dragdrop: 1400;
$z-index-toasts: 1600;