:root {
  --ui-color-primary: #0f766e;
  --ui-color-primary-strong: #0b5f59;
  --ui-color-primary-deep: #083c3a;
  --ui-color-accent: #2563eb;
  --ui-color-text: #0f172a;
  --ui-color-muted: #64748b;
  --ui-color-surface: #ffffff;
  --ui-color-surface-soft: #f8fbff;
  --ui-color-line: #dbeafe;
  --ui-color-success: #047857;
  --ui-color-warning: #b45309;
  --ui-color-danger: #dc2626;
  --ui-color-info-soft: #eef8ff;
  --ui-color-danger-soft: #fff1f2;
  --ui-color-danger-line: #fecdd3;
  --ui-color-success-soft: #ecfdf5;
  --ui-color-success-line: #a7f3d0;
  --ui-color-focus: rgba(37, 99, 235, .14);
  --ui-color-table-line: #bde8da;
  --ui-color-row-alt: #f7fcfa;
  --ui-color-row-hover: #edf9f5;
  --ui-page-background: linear-gradient(145deg, #edf8f6 0%, #f5f9ff 52%, #eef6ff 100%);
  --ui-font-family: 'Cairo', Tahoma, Arial, sans-serif;
  --ui-radius-sm: 9px;
  --ui-radius-md: 13px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-control-height: 34px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-shadow-soft: 0 10px 24px rgba(15, 23, 42, .055);
  --ui-shadow-control: 0 7px 16px rgba(15, 118, 110, .14);
  --ui-shadow-control-hover: 0 10px 22px rgba(15, 118, 110, .2);
  --ui-shadow-header: 0 12px 30px rgba(15, 118, 110, .16);
  --ui-shadow-modal: 0 24px 70px rgba(15, 23, 42, .22);
  --ui-gradient-brand: linear-gradient(135deg, var(--ui-color-primary), var(--ui-color-accent));
}