:root {
  /* Design Tokens */

  /* Color Palette */

  /* Primary */
  --c-color-primary-900: #b86d27;
  --c-color-primary-800: #b86d27;
  --c-color-primary-700: #b86d27;
  --c-color-primary-600: #b86d27;
  --c-color-primary-500: #f18116;
  --c-color-primary-400: rgb(255 175 99);
  --c-color-primary-300: #fccea4;
  --c-color-primary-200: #ffecda;
  --c-color-primary-100: #fff0e3;
  --c-color-primary-50: #fff9f3;
  --c-color-primary: var(--c-color-primary-500);

  /* Success */
  --c-color-success-900: rgb(82.4 155.2 46.4);
  --c-color-success-800: rgb(82.4 155.2 46.4);
  --c-color-success-700: rgb(82.4 155.2 46.4);
  --c-color-success-600: rgb(82.4 155.2 46.4);
  --c-color-success-500: #67c23a;
  --c-color-success-400: rgb(148.6 212.3 117.1);
  --c-color-success-300: rgb(179 224.5 156.5);
  --c-color-success-200: rgb(209.4 236.7 195.9);
  --c-color-success-100: rgb(224.6 242.8 215.6);
  --c-color-success-50: rgb(239.8 248.9 235.3);
  --c-color-success: var(--c-color-success-500);

  /* Warning */
  --c-color-warning-900: rgb(184 129.6 48);
  --c-color-warning-800: rgb(184 129.6 48);
  --c-color-warning-700: rgb(184 129.6 48);
  --c-color-warning-600: rgb(184 129.6 48);
  --c-color-warning-500: #e6a23c;
  --c-color-warning-400: rgb(237.5 189.9 118.5);
  --c-color-warning-300: rgb(242.5 208.5 157.5);
  --c-color-warning-200: rgb(247.5 227.1 196.5);
  --c-color-warning-100: rgb(250 236.4 216);
  --c-color-warning-50: rgb(252.5 245.7 235.5);
  --c-color-warning: var(--c-color-warning-500);

  /* Danger */
  --c-color-error-900: rgb(196 86.4 86.4);
  --c-color-error-800: rgb(196 86.4 86.4);
  --c-color-error-700: rgb(196 86.4 86.4);
  --c-color-error-600: rgb(196 86.4 86.4);
  --c-color-error-500: #f56c6c;
  --c-color-error-400: rgb(248 152.1 152.1);
  --c-color-error-300: rgb(250 181.5 181.5);
  --c-color-error-200: rgb(252 210.9 210.9);
  --c-color-error-100: rgb(253 225.6 225.6);
  --c-color-error-50: rgb(254 240.3 240.3);
  --c-color-error: var(--c-color-error-500);

  /* Info */
  --c-color-info-900: rgb(115.2 117.6 122.4);
  --c-color-info-800: rgb(115.2 117.6 122.4);
  --c-color-info-700: rgb(115.2 117.6 122.4);
  --c-color-info-600: rgb(115.2 117.6 122.4);
  --c-color-info-500: #909399;
  --c-color-info-400: rgb(177.3 179.4 183.6);
  --c-color-info-300: rgb(199.5 201 204);
  --c-color-info-200: rgb(221.7 222.6 224.4);
  --c-color-info-100: rgb(232.8 233.4 234.6);
  --c-color-info-50: rgb(243.9 244.2 244.8);
  --c-color-info: var(--c-color-info-500);

  /* Text */
  --c-text-color-primary: #303133;
  --c-text-color-regular: #606266;
  --c-text-color-secondary: var(--c-color-info);
  --c-text-color-placeholder: #a8abb2;
  --c-text-color-disabled: #c0c4cc;

  /* Surfaces */
  --c-color-background: #ffffff;
  --c-color-surface: var(--c-fill-color-blank);
  --c-bg-color-page: #f2f3f5;
  --c-overlay-color-1: rgb(0 0 0 / 80%);
  --c-overlay-color-2: rgb(0 0 0 / 70%);
  --c-overlay-color-3: rgb(0 0 0 / 50%);

  /* "On" colors */
  --c-color-on-background: var(--c-text-color-primary);
  --c-color-on-surface: var(--c-text-color-primary);
  --c-color-on-primary: var(--c-fill-color-blank);
  --c-color-on-success: var(--c-fill-color-blank);
  --c-color-on-warning: var(--c-fill-color-blank);
  --c-color-on-error: var(--c-fill-color-blank);
  --c-color-on-info: var(--c-text-color-primary);

  /* Fill */
  --c-fill-color: #f0f2f5;
  --c-fill-color-light: #f5f7fa;
  --c-fill-color-lighter: #fafafa;
  --c-fill-color-extra-light: #fafcff;
  --c-fill-color-dark: #ebedf0;
  --c-fill-color-darker: #e6e8eb;
  --c-fill-color-blank: #ffffff;

  /* Border */
  --c-border-color: #dcdfe6;
  --c-border-color-light: #e4e7ed;
  --c-border-color-lighter: #ebeef5;
  --c-border-color-extra-light: #f2f6fc;
  --c-border-color-dark: #d4d7de;
  --c-border-color-darker: #cdd0d6;

  /* States */
  --c-bg-color-disabled: var(--c-fill-color-light);
  --c-border-color-disabled: var(--c-border-color-light);
  --c-border-color-hover: var(--el-text-color-disabled);

  /* Gaps */
  --c-grid-size: 4px;
  --c-gap-025: calc(var(--c-grid-size) / 4);
  --c-gap-05: calc(var(--c-grid-size) / 2);
  --c-gap-1: var(--c-grid-size);
  --c-gap-2: calc(var(--c-grid-size) * 2);
  --c-gap-3: calc(var(--c-grid-size) * 3);
  --c-gap-4: calc(var(--c-grid-size) * 4);
  --c-gap-5: calc(var(--c-grid-size) * 5);
  --c-gap-6: calc(var(--c-grid-size) * 6);
  --c-gap-7: calc(var(--c-grid-size) * 8);
  --c-gap-8: calc(var(--c-grid-size) * 12);
  --c-gap-9: calc(var(--c-grid-size) * 16);
  --c-gap-10: calc(var(--c-grid-size) * 25);
  --c-gap-1-neg: calc(var(--c-gap-1) * -1);
  --c-gap-2-neg: calc(var(--c-gap-2) * -1);
  --c-gap-3-neg: calc(var(--c-gap-3) * -1);
  --c-gap-4-neg: calc(var(--c-gap-4) * -1);
  --c-gap-5-neg: calc(var(--c-gap-5) * -1);
  --c-gap-6-neg: calc(var(--c-gap-6) * -1);
  --c-gap-7-neg: calc(var(--c-gap-7) * -1);
  --c-gap-8-neg: calc(var(--c-gap-8) * -1);
  --c-gap-9-neg: calc(var(--c-gap-9) * -1);
  --c-gap-10-neg: calc(var(--c-gap-10) * -1);

  /* Typography */
  --c-font-family: system-ui, sans-serif;
  --c-line-height-1: 1;
  --c-line-height-normal: 1.5;
  --c-line-height-condensed: 1.3;
  --c-font-weight-semi-bold: 500;
  --c-font-weight-bold: 600;
  --c-font-weight-normal: 400;

  /* 1.125 Major Second */
  --c-text-headline-1-font-size: 28px;
  --c-text-headline-2-font-size: 25px;
  --c-text-headline-3-font-size: 22px;
  --c-text-headline-4-font-size: 20px;
  --c-text-headline-5-font-size: 18px;
  --c-text-headline-6-font-size: 16px;
  --c-text-base-1-font-size: 16px;
  --c-text-base-2-font-size: 14px;
  --c-text-caption-font-size: 12px;
  --c-text-controls-font-size: var(--c-text-base-2-font-size);
  --c-text-headline-1: var(--c-font-weight-bold)
    var(--c-text-headline-1-font-size) / var(--c-line-height-condensed)
    var(--c-font-family);
  --c-text-headline-2: var(--c-font-weight-bold)
    var(--c-text-headline-2-font-size) / var(--c-line-height-condensed)
    var(--c-font-family);
  --c-text-headline-3: var(--c-font-weight-bold)
    var(--c-text-headline-3-font-size) / var(--c-line-height-condensed)
    var(--c-font-family);
  --c-text-headline-4: var(--c-font-weight-bold)
    var(--c-text-headline-4-font-size) / var(--c-line-height-condensed)
    var(--c-font-family);
  --c-text-headline-5: var(--c-font-weight-bold)
    var(--c-text-headline-5-font-size) / var(--c-line-height-normal)
    var(--c-font-family);
  --c-text-headline-6: var(--c-font-weight-bold)
    var(--c-text-headline-6-font-size) / var(--c-line-height-normal)
    var(--c-font-family);
  --c-text-body-1: var(--c-text-base-1-font-size) / var(--c-line-height-normal)
    var(--c-font-family);
  --c-text-body-2: var(--c-text-base-2-font-size) / var(--c-line-height-normal)
    var(--c-font-family);
  --c-text-controls: var(--c-text-controls-font-size) / var(--c-line-height-condensed) var(--c-font-family);
  --c-text-caption: var(--c-text-caption-font-size) / var(--c-line-height-normal) var(--c-font-family);
  --c-text-headline-margin-top: var(--c-gap-5);
  --c-text-headline-margin-bottom: var(--c-gap-2);
  --c-text-body-margin-top: var(--c-gap-2);
  --c-text-body-margin-bottom: var(--c-gap-2);

  /* Text list */
  --c-text-list-margin-top: 0;
  --c-text-list-margin-bottom: var(--c-gap-3);
  --c-text-list-padding-left: var(--c-gap-6);
  --c-text-list-inner-margin-top: var(--c-gap-2);
  --c-text-list-inner-margin-bottom: 0;
  --c-text-list-inner-padding-left: var(--c-gap-5);
  --c-text-list-item-gap: var(--c-gap-2);

  /* Size and shape */
  --c-control-size-xs: 20px;
  --c-control-size-sm: 24px;
  --c-control-size-md: 32px;
  --c-control-size-lg: 40px;
  --c-control-size-base: var(--c-control-size-md);
  --c-border-radius-base: var(--c-gap-2);
  --c-border-radius-sm: var(--c-gap-1);
  --c-border-radius-md: var(--c-gap-3);
  --c-border-radius-lg: var(--c-gap-4);
  --c-border-radius-rounded: var(--c-gap-5);
  --c-border-width: 1px;

  /* Focus */
  --c-focus-outline-color: var(--c-color-primary);
  --c-focus-outline-width: 2px;
  --c-focus-outline-offset: 2px;
  --c-focus-outline: var(--c-focus-outline-width) solid var(--c-focus-outline-color);

  /* Animation */
  --c-transition-duration: 0.2s;
  --c-transition-duration-fast: 0.1s;

  /* Components */

  /* Компонентные токены нельзя использовать для кастомных стилей */

  /* Field */
  --c-field-icon-color: var(--c-text-color-placeholder);
  --c-field-border-radius: var(--c-border-radius-base);
  --c-field-bg-color: var(--c-fill-color-blank);
  --c-field-bg-color-disabled: var(--c-bg-color-disabled);
  --c-field-border-color: var(--c-border-color);
  --c-field-border-color-hover: var(--c-color-info);
  --c-field-border-color-focus: var(--c-color-primary);
  --c-field-border-color-disabled: var(--c-border-color-disabled);
  --c-field-border-color-success: var(--c-color-success);
  --c-field-border-color-warning: var(--c-color-warning);
  --c-field-border-color-error: var(--c-color-danger);
  --c-field-text-color: var(--c-text-color-regular);
  --c-field-text-color-disabled: var(--c-text-color-placeholder);
  --c-field-text-placeholder-color: var(--c-text-color-placeholder);
  --c-field-text-placeholder-color-disabled: var(--c-text-color-disabled);

  /* Dropdown */
  --c-dropdown-width-max: 560px;
  --c-dropdown-item-height-sm: 32px;
  --c-dropdown-item-height-md: 34px;
  --c-dropdown-item-height-lg: 40px;
  --c-dropdown-item-height-base: var(--c-dropdown-item-height-md);

  /* Tree */
  --c-tree-item-height: 28px;

  /* Aside */
  --c-aside-background-color: var(--c-fill-color-blank);

  /* Menu */
  --c-menu-padding: var(--c-gap-4);
  --c-menu-item-height: 44px;

  /* Icon */
  --c-icon-size-xs: 16px;
  --c-icon-size-sm: 20px;
  --c-icon-size-md: 24px;
  --c-icon-size-lg: 32px;

  /* InputNumber */
  --c-input-number-width-min: 128px;

  /* Select */
  --c-select-width-min: 148px;

  /* Checkbox */
  --c-checkbox-height: var(--c-control-size-md);
  --c-checkbox-size-base: 16px;
  --c-checkbox-group-height-max: 420px;


  /* Dialog */
  --c-dialog-border-radius: var(--c-border-radius-lg);
  --c-dialog-margin-full: var(--c-gap-3);
  --c-dialog-width-full: calc(100% - var(--c-dialog-margin-full) * 2);
  --c-table-dialog-height: 58vh;
  --c-dialog-padding: var(--c-gap-5);
  --c-dialog-width-xs: 420px;
  --c-dialog-width-sm: 520px;
  --c-dialog-width-md: 700px;
  --c-dialog-width-lg: 1024px;
  --c-dialog-width-xl: 1280px;

  /* MessageBox */
  --c-message-box-width: var(--c-dialog-width-xs);

  /* DatePicker */
  --c-date-editor-daterange-width: 248px;

  /* Form */
  --c-form-actions-group-gap: var(--c-gap-4);
  --c-form-actions-action-gap: var(--c-gap-3);

  /* FilterBar */
  --c-filter-bar-gap: var(--c-gap-3);

  /* LayoutContainer */
  --c-aside-width: 264px;
  --c-header-gap: var(--c-gap-5);
  --c-header-controls-gap: var(--c-gap-3);
  --c-header-height: 68px;
  --c-main-padding: var(--c-gap-5);
  --c-footer-height-min: 68px;
  --c-footer-padding: var(--c-main-padding);

  /* PageLayout */
  --c-page-layout-width-dense: 1280px;
  --c-page-layout-sidebar-width: 320px;
  --c-page-layout-sidebar-width-dense: 280px;

  /* Space */
  --c-space-gap: var(--c-gap-1);

  /* Table */
  --c-table-column-actions-width: 64px;

  /* DateEditor */
  --c-date-editor-width: 160px;

  /* Drawer */
  --c-drawer-width-xs: 448px;
  --c-drawer-width: 548px;
  --c-drawer-padding: var(--c-dialog-padding);

  /* Card */
  --c-card-padding: var(--c-gap-5);
  --c-card-padding-sm: var(--c-gap-3);
  --c-card-border-radius: var(--c-border-radius-md);
}

body {
  font-family: var(--c-font-family);
  color: var(--c-color-on-background);
  background-color: var(--c-color-background);
}

@media (prefers-reduced-motion) {
  :root {
    --c-transition-duration: 0;
    --c-transition-duration-fast: 0;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --c-control-size-xs: 24px;
    --c-control-size-sm: 32px;
    --c-control-size-md: 40px;
    --c-control-size-lg: 48px;
    --c-table-dialog-height: calc(80vh - var(--c-dialog-margin-full) * 2);
    --c-main-padding: var(--c-gap-3);
    --c-drawer-padding: var(--c-main-padding);
    --c-dialog-padding: var(--c-main-padding);
    --c-card-padding: var(--c-main-padding);
    --c-drawer-width: 100%;
    --c-drawer-width-xs: 100%;
    --c-select-width-min: 120px;
    --c-date-editor-width: 120px;
  }
}