@import "styles/fonts.css";

:root {
  --color-primary: #fff;
  --color-secondary: #cdcbc7;
  --color-gray-700: #323539;
  --color-neutral-100: #f8f9fb;
  --color-neutral-200: #f9f9f9;
  --color-neutral-400: #f5f5f5;
  --color-neutral-600: #eaebf0;
  --color-white: #ffffff;
  --color-cool-gray: #d1d9e2;
  --color-dark-green: #476a40;
  --color-light-green: #d2f2d2;
  --color-dark-orange: #8c6228;
  --color-light-orange: #f1e3cf;
  --color-dark-blue: #23485c;
  --color-light-blue: #c1dfef;
  --color-new-blue: var(--color-primary);
  --color-new-blue-light: #e0e6f6;
  --color-ubica-blue: var(--color-primary);
  --color-ubica-blue-light: var(--color-secondary);
  --color-soft-blue: #f6f9ff;

  --color-label-new: var(--color-new-blue);
  --color-label-new-background: var(--color-new-blue-light);
  --color-label-picking: var(--color-dark-blue);
  --color-label-picking-background: var(--color-light-blue);
  --color-label-delivered: var(--color-dark-green);
  --color-label-delivered-background: var(--color-light-green);
  --color-label-open: var(--color-dark-orange);
  --color-label-open-background: var(--color-light-orange);

  --color-sidebar-selected: var(--color-soft-blue);
  --color-text: var(--color-gray-700);

  --url-brand-logo: url("/themes/default/img/logo.svg");
  --font-family-primary: "SpaceGrotesk", sans-serif;
  --logo-header-height: 114px;
  --logo-header-width: 114px;

  --size-xs: 4px;
  --size-s: 8px;
  --size-m: 16px;
  --size-l: 24px;
  --size-xl: 32px;

  --color-bg-primary: var(--color-white);
  --color-fg-primary: var(--color-primary);

  --color-bg-secondary: var(--color-primary);
  --color-fg-secondary: var(--color-white);
}