:root {
  /* ── Neutral ramp (Fluent 2 Neutral) ── */
  --color-neutral-bg-1: #ffffff;
  --color-neutral-bg-2: #fafafa;
  --color-neutral-bg-3: #f5f5f5;
  --color-neutral-stroke-1: #e0e0e0;
  --color-neutral-fg-1: #242424;
  --color-neutral-fg-2: #424242;
  --color-neutral-fg-3: #707070;

  /* ── Brand (Faisal teal) ── */
  --color-brand-bg: #0f6b6b;
  --color-brand-bg-hover: #0a5454;
  --color-brand-fg: #ffffff;
  --color-brand-stroke: #0f6b6b;

  /* ── Status ── */
  --color-success: #107c10;
  --color-warning: #c19c00;
  --color-danger:  #c50f1f;
  --color-pending: #5c2e91;

  /* ── Spacing scale (Fluent 4-px) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* ── Type ramp ── */
  --font-display: 28px / 36px 'Tajawal', system-ui, sans-serif;
  --font-title:   20px / 28px 'Tajawal', system-ui, sans-serif;
  --font-body:    14px / 20px 'Tajawal', system-ui, sans-serif;
  --font-caption: 12px / 16px 'Tajawal', system-ui, sans-serif;

  /* ── Elevation ── */
  --shadow-2:  0 1px 2px rgba(0,0,0,.07), 0 0 2px rgba(0,0,0,.06);
  --shadow-8:  0 4px 8px rgba(0,0,0,.10), 0 0 2px rgba(0,0,0,.06);
  --shadow-16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.06);

  /* ── Corner radii ── */
  --r-2: 4px;  --r-4: 8px;  --r-circular: 9999px;

  /* ── Motion ── */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --ease-out: cubic-bezier(0.33, 0, 0.67, 1);

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 2px var(--color-brand-bg);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Screen-reader-only — visually hidden but announced. WCAG 1.3.1 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Buttons ── */
.ui-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border-radius: var(--r-2); font: var(--font-body); font-weight: 600;
  padding: var(--s-2) var(--s-4); border: 1px solid transparent;
  cursor: pointer; transition: background var(--duration-fast) var(--ease-out);
  text-decoration: none;
}
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ui-btn-primary   { background: var(--color-brand-bg); color: var(--color-brand-fg); }
.ui-btn-primary:hover:not([disabled])   { background: var(--color-brand-bg-hover); }
.ui-btn-secondary { background: var(--color-neutral-bg-1); color: var(--color-neutral-fg-1); border-color: var(--color-neutral-stroke-1); }
.ui-btn-secondary:hover:not([disabled]) { background: var(--color-neutral-bg-3); }
.ui-btn-subtle    { background: transparent; color: var(--color-neutral-fg-2); }
.ui-btn-subtle:hover:not([disabled])    { background: var(--color-neutral-bg-3); }
.ui-btn-danger    { background: var(--color-danger); color: #fff; }
.ui-btn-link      { background: transparent; color: var(--color-brand-bg); padding: 0; }
.ui-btn-link:hover{ text-decoration: underline; }
.ui-btn-sm { padding: var(--s-2) var(--s-3); font-size: 12px; min-height: 36px; min-width: 36px; justify-content: center; }
.ui-btn-lg { padding: var(--s-3) var(--s-5); font-size: 16px; }

/* ── Fields ── */
.ui-field-label { display: block; font: var(--font-caption); color: var(--color-neutral-fg-2); margin-bottom: var(--s-1); }
.ui-field-input,
.ui-field-textarea,
.ui-field-select {
  width: 100%; border: 1px solid var(--color-neutral-stroke-1);
  border-radius: var(--r-2); padding: var(--s-2) var(--s-3);
  font: var(--font-body); background: var(--color-neutral-bg-1);
}
.ui-field-input:focus-visible,
.ui-field-textarea:focus-visible,
.ui-field-select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-brand-bg); }
.ui-field-error { color: var(--color-danger); font: var(--font-caption); margin-top: var(--s-1); }
.ui-field-hint  { color: var(--color-neutral-fg-3); font: var(--font-caption); margin-top: var(--s-1); }

/* ── Badges / pills ── */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font: var(--font-caption); font-weight: 600;
  padding: 2px var(--s-2); border-radius: var(--r-circular);
}
.ui-badge-neutral { background: var(--color-neutral-bg-3); color: var(--color-neutral-fg-2); }
.ui-badge-brand   { background: var(--color-brand-bg); color: #fff; }
.ui-badge-success { background: #dff6dd; color: var(--color-success); }
.ui-badge-warning { background: #fff4ce; color: var(--color-warning); }
.ui-badge-danger  { background: #fde7e9; color: var(--color-danger); }
.ui-badge-pending { background: #eddbf5; color: var(--color-pending); }

/* ── Cards ── */
.ui-card { background: var(--color-neutral-bg-1); border: 1px solid var(--color-neutral-stroke-1); border-radius: var(--r-4); padding: var(--s-4); box-shadow: var(--shadow-2); }
.ui-card-title { font: var(--font-title); margin: 0 0 var(--s-1) 0; }
.ui-card-subtitle { font: var(--font-caption); color: var(--color-neutral-fg-3); margin: 0 0 var(--s-3) 0; }

/* ── Message bar ── */
.ui-msg { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); font: var(--font-body); }
.ui-msg-info    { background: #eff6fc; color: #115ea3; }
.ui-msg-success { background: #dff6dd; color: var(--color-success); }
.ui-msg-warning { background: #fff4ce; color: var(--color-warning); }
.ui-msg-danger  { background: #fde7e9; color: var(--color-danger); }

/* ── Tab bar ── */
.ui-tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--color-neutral-stroke-1); }
.ui-tab  { padding: var(--s-2) var(--s-4); color: var(--color-neutral-fg-2); border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; }
.ui-tab[aria-selected="true"] { color: var(--color-brand-bg); border-bottom-color: var(--color-brand-bg); font-weight: 600; }

/* ── Dialog ── */
dialog.ui-dialog { border: none; border-radius: var(--r-4); box-shadow: var(--shadow-16); padding: 0; max-width: 480px; }
dialog.ui-dialog::backdrop { background: rgba(0,0,0,0.35); }
.ui-dialog-header { padding: var(--s-4) var(--s-5) var(--s-2); }
.ui-dialog-title  { font: var(--font-title); margin: 0; }
.ui-dialog-body   { padding: 0 var(--s-5); font: var(--font-body); color: var(--color-neutral-fg-2); }
.ui-dialog-actions{ display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-4) var(--s-5); }

/* ── Approval pill ── */
.ui-approval-pill { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--font-caption); }