/*
 * CSE UI Kit — CSS custom properties
 * Source: https://lktest.cse.ru (measured) + explicit decisions (see DESIGN.md §12).
 * A token flagged with a trailing D-comment is NOT present in the product.
 */
:root {

  /* ── grid */
  --cse-grid-size: 4px;
  --cse-border-width: 1px;

  /* ── colour — brand & status ramps */
  --cse-color-primary-50: #fff9f3;
  --cse-color-primary-100: #fff0e3;
  --cse-color-primary-200: #ffecda;
  --cse-color-primary-300: #fccea4;
  --cse-color-primary-400: #ffaf63;
  --cse-color-primary-500: #f18116;
  --cse-color-primary-600: #b86d27;
  --cse-color-primary-700: #a05f22; /* D */
  --cse-color-primary-800: #88511d; /* D */
  --cse-color-primary-900: #704318; /* D */
  --cse-color-success-50: #f0f9eb;
  --cse-color-success-100: #e1f3d8;
  --cse-color-success-200: #d1edc4;
  --cse-color-success-300: #b3e19d;
  --cse-color-success-400: #95d475;
  --cse-color-success-500: #67c23a;
  --cse-color-success-600: #529b2e;
  --cse-color-success-700: #478527; /* D */
  --cse-color-success-800: #3b6f21; /* D */
  --cse-color-success-900: #2f581a; /* D */
  --cse-color-warning-50: #fdf6ec;
  --cse-color-warning-100: #faecd8;
  --cse-color-warning-200: #f8e3c5;
  --cse-color-warning-300: #f3d19e;
  --cse-color-warning-400: #eebe77;
  --cse-color-warning-500: #e6a23c;
  --cse-color-warning-600: #b88230;
  --cse-color-warning-700: #9e7029; /* D */
  --cse-color-warning-800: #845d22; /* D */
  --cse-color-warning-900: #6a4b1b; /* D */
  --cse-color-error-50: #fef0f0;
  --cse-color-error-100: #fde2e2;
  --cse-color-error-200: #fcd3d3;
  --cse-color-error-300: #fab6b6;
  --cse-color-error-400: #f89898;
  --cse-color-error-500: #f56c6c;
  --cse-color-error-600: #c45656;
  --cse-color-error-700: #a94a4a; /* D */
  --cse-color-error-800: #8e3e3e; /* D */
  --cse-color-error-900: #733232; /* D */
  --cse-color-info-50: #f4f4f5;
  --cse-color-info-100: #e9e9eb;
  --cse-color-info-200: #dedfe0;
  --cse-color-info-300: #c8c9cc;
  --cse-color-info-400: #b1b3b8;
  --cse-color-info-500: #909399;
  --cse-color-info-600: #73767a;
  --cse-color-info-700: #636669; /* D */
  --cse-color-info-800: #525558; /* D */
  --cse-color-info-900: #424447; /* D */

  /* ── colour — foreground pairs */
  --cse-color-on-primary: #ffffff;
  --cse-color-on-success: #ffffff;
  --cse-color-on-warning: #ffffff;
  --cse-color-on-error: #ffffff;
  --cse-color-on-info: #303133;
  --cse-color-on-surface: #303133;
  --cse-color-on-background: #303133;

  /* ── colour — text */
  --cse-text-primary: #303133;
  --cse-text-regular: #606266;
  --cse-text-secondary: #909399;
  --cse-text-placeholder: #a8abb2;
  --cse-text-disabled: #c0c4cc;

  /* ── colour — surfaces */
  --cse-surface-blank: #ffffff;
  --cse-surface-background: #ffffff;
  --cse-surface-page: #f2f3f5;
  --cse-surface-fill: #f0f2f5;
  --cse-surface-fill-light: #f5f7fa;
  --cse-surface-fill-lighter: #fafafa;
  --cse-surface-fill-dark: #ebedf0;

  /* ── colour — borders */
  --cse-border: #dcdfe6;
  --cse-border-dark: #d4d7de;
  --cse-border-darker: #cdd0d6;
  --cse-border-light: #e4e7ed;
  --cse-border-lighter: #ebeef5;
  --cse-border-extra-light: #f2f6fc;
  --cse-border-hover: #c0c4cc;

  /* ── colour — overlays */
  --cse-overlay-1: rgb(0 0 0 / 80%);
  --cse-overlay-2: rgb(0 0 0 / 70%);
  --cse-overlay-3: rgb(0 0 0 / 50%);

  /* ── typography */
  --cse-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cse-font-weight-normal: 400;
  --cse-font-weight-medium: 500;
  --cse-font-weight-bold: 600;
  --cse-font-lineheight-none: 1;
  --cse-font-lineheight-condensed: 1.3;
  --cse-font-lineheight-normal: 1.5;
  --cse-font-letterspacing: 0;

  /* ── spacing scale (4px grid) */
  --cse-space-1: 4px;
  --cse-space-2: 8px;
  --cse-space-3: 12px;
  --cse-space-4: 16px;
  --cse-space-5: 20px;
  --cse-space-6: 24px;
  --cse-space-7: 32px;
  --cse-space-8: 48px;
  --cse-space-9: 64px;
  --cse-space-10: 100px;
  --cse-space-025: 1px;
  --cse-space-05: 2px;

  /* ── radii */
  --cse-radius-sm: 4px;
  --cse-radius-base: 8px;
  --cse-radius-md: 12px;
  --cse-radius-lg: 16px;
  --cse-radius-rounded: 20px;
  --cse-radius-full: 9999px;

  /* ── elevation */
  --cse-shadow-base: 0 12px 32px 4px rgb(0 0 0 / 4%), 0 8px 20px rgb(0 0 0 / 8%);
  --cse-shadow-light: 0 0 12px rgb(0 0 0 / 12%);
  --cse-shadow-lighter: 0 0 6px rgb(0 0 0 / 12%);
  --cse-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 8%), 0 12px 32px rgb(0 0 0 / 12%), 0 8px 16px -8px rgb(0 0 0 / 16%);

  /* ── control & icon sizes */
  --cse-size-control-xs: 20px;
  --cse-size-control-sm: 24px;
  --cse-size-control-md: 32px;
  --cse-size-control-lg: 40px;
  --cse-size-icon-xs: 16px;
  --cse-size-icon-sm: 20px;
  --cse-size-icon-md: 24px;
  --cse-size-icon-lg: 32px;

  /* ── layout */
  --cse-layout-header-height: 68px;
  --cse-layout-aside-width: 264px;
  --cse-layout-main-padding: 20px;
  --cse-layout-main-padding-sm: 12px;
  --cse-layout-footer-height-min: 68px;
  --cse-layout-menu-item-height: 44px;
  --cse-layout-sidebar-width: 320px;
  --cse-layout-sidebar-width-dense: 280px;
  --cse-layout-page-width-dense: 1280px;
  --cse-layout-card-padding: 20px;
  --cse-layout-card-padding-sm: 12px;
  --cse-layout-dialog-padding: 16px;
  --cse-layout-dropdown-width-max: 560px;
  --cse-layout-empty-padding: 40px;
  --cse-layout-table-actions-width: 64px;

  /* ── dialog widths */
  --cse-dialog-width-xs: 420px;
  --cse-dialog-width-sm: 520px;
  --cse-dialog-width-md: 700px;
  --cse-dialog-width-lg: 1024px;
  --cse-dialog-width-xl: 1280px;
  --cse-dialog-width-full: calc(100% - 24px);

  /* ── motion */
  --cse-motion-duration: 200ms;
  --cse-motion-duration-fast: 100ms;
  --cse-motion-easing: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* ── focus ring */
  --cse-focus-width: 2px;
  --cse-focus-offset: 2px;
  --cse-focus-color: #f18116;
  --cse-focus-color-button: #fccea4;
  --cse-focus-offset-button: 1px;

  /* ── type scale (size / line-height / weight) */
  --cse-type-headline-1-size: 28px;
  --cse-type-headline-1-line-height: 1.3;
  --cse-type-headline-1-weight: 600;
  --cse-type-headline-2-size: 25px;
  --cse-type-headline-2-line-height: 1.3;
  --cse-type-headline-2-weight: 600;
  --cse-type-headline-3-size: 22px;
  --cse-type-headline-3-line-height: 1.3;
  --cse-type-headline-3-weight: 600;
  --cse-type-headline-4-size: 20px;
  --cse-type-headline-4-line-height: 1.3;
  --cse-type-headline-4-weight: 600;
  --cse-type-headline-5-size: 18px;
  --cse-type-headline-5-line-height: 1.5;
  --cse-type-headline-5-weight: 600;
  --cse-type-headline-6-size: 16px;
  --cse-type-headline-6-line-height: 1.5;
  --cse-type-headline-6-weight: 600;
  --cse-type-body-1-size: 16px;
  --cse-type-body-1-line-height: 1.5;
  --cse-type-body-1-weight: 400;
  --cse-type-body-2-size: 14px;
  --cse-type-body-2-line-height: 1.5;
  --cse-type-body-2-weight: 400;
  --cse-type-controls-size: 14px;
  --cse-type-controls-line-height: 1.3;
  --cse-type-controls-weight: 500;
  --cse-type-caption-size: 12px;
  --cse-type-caption-line-height: 1.5;
  --cse-type-caption-weight: 400;

  /* ── semantic aliases used by the components */
  --cse-color-primary: var(--cse-color-primary-500);
  --cse-color-success: var(--cse-color-success-500);
  --cse-color-warning: var(--cse-color-warning-500);
  --cse-color-error: var(--cse-color-error-500);
  --cse-color-info: var(--cse-color-info-500);
  --cse-focus-ring: var(--cse-focus-width) solid var(--cse-focus-color);
}