/* Layout */
.h-screen { height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Sizing — из токенов где возможно */
.h-fit { height: fit-content; }
.h-16 { height: var(--header-height); }
.h-10 { height: var(--height-button); }
.w-72 { width: var(--sidebar-width); }
.w-10 { width: var(--height-button); }
.max-w-md { max-width: var(--login-card-max-width); }
.p-4 { padding: var(--space-md); }
.p-6 { padding: var(--main-padding); }
.p-8 { padding: var(--space-xl); }
.px-4 { padding-left: var(--table-cell-padding-x); padding-right: var(--table-cell-padding-x); }
.px-6 { padding-left: var(--header-padding-x); padding-right: var(--header-padding-x); }
.py-3 { padding-top: var(--table-cell-padding-y); padding-bottom: var(--table-cell-padding-y); }
.py-4 { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-8 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Border */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-r { border-right-width: 1px; }
.border-t { border-top-width: 1px; }
.border-transparent { border-color: transparent; }
.border-gray-200 { border-color: var(--color-border); }
.border-blue-700 { border-color: var(--color-accent); }
.border-red-500 { border-color: var(--color-error); }

/* Background */
.bg-white { background-color: var(--color-bg-card); }
.bg-gray-100 { background-color: var(--color-hover-bg); }
.bg-blue-200\/20 { background-color: var(--color-highlight-bg); }

/* Gap — из токенов */
.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-4 { gap: var(--space-md); }

/* Typography — из токенов */
.text-left { text-align: left; }
.text-sm { font-size: var(--font-size-ui); }
.text-lg { font-size: var(--form-heading-size-section); }
.text-xl { font-size: var(--page-title-size); }
.text-2xl { font-size: var(--page-title-size); }
.text-blue-700 { color: var(--color-accent); }
.text-gray-500 { color: var(--color-text-muted); }
.text-gray-700 { color: var(--color-text-secondary); }
.text-gray-950 { color: var(--color-text); }
.text-red-600 { color: var(--color-error-text); }
.text-emerald-600 { color: var(--emerald-600); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.font-mono { font-family: ui-monospace, monospace; }

/* Flex alignment */
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Border radius — из токенов */
.rounded-xl { border-radius: var(--radius-input); }
.rounded-2xl { border-radius: var(--radius-table); }
.rounded-3xl { border-radius: var(--radius-card); }
.rounded-full { border-radius: var(--radius-button); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Misc */
.hidden { display: none; }
.duration-200 { transition-duration: var(--transition-base); }
.duration-300 { transition-duration: 0.3s; }
.transition-default { transition-property: border-color, background-color, color; transition-duration: var(--transition-base); transition-timing-function: ease; }
.mb-3 { margin-bottom: var(--table-cell-padding-y); }
.mb-4 { margin-bottom: var(--space-md); }
.mb-6 { margin-bottom: var(--page-toolbar-margin-bottom); }
.mt-1 { margin-top: var(--space-xs); }
.mt-4 { margin-top: var(--space-md); }

/* Hover (for links and menu) */
.hover\:border-gray-200:hover { border-color: var(--color-border); }
.hover\:bg-gray-100:hover { background-color: var(--color-hover-bg); }
.hover\:text-blue-700:hover { color: var(--color-accent); }
.hover\:underline:hover { text-decoration: underline; }

/* Text alignment */
.text-right { text-align: right; }

/* Focus for inputs */
.focus\:outline-none:focus { outline: none; }
.focus\:border-blue-700:focus { border-color: var(--input-focus-border); }
.focus\:border-red-500:focus { border-color: var(--input-error-border); }

/* Links: look like buttons when needed */
a.ds-btn,
a.btn-filled,
a.btn-filled-gray,
a.btn-outlined {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}