@font-face {
  font-family: 'Dana';
  src: url('/font/Dana-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('/font/Dana-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('/font/Dana-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('/font/Dana-DemiBold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-main: 'Dana', sans-serif;

  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-primary-soft: #fff7ed;
  --color-primary-border: #fdba74;
  --color-primary-text: #c2410c;

  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  --color-border: #e5e7eb;
  --color-border-soft: #f1f5f9;

  --color-bg-page: #fafafa;
  --color-surface: #ffffff;
  --color-surface-soft: #f9fafb;

  --color-success: #22c55e;
  --color-success-soft: #dcfce7;
  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-danger: #ef4444;
  --color-danger-soft: #fee2e2;
  --color-info: #3b82f6;
  --color-info-soft: #dbeafe;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.18);

  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-soft: var(--color-primary-soft);
  --bg-body: var(--color-bg-page);
  --bg-surface: var(--color-surface);
  --bg-sidebar: var(--color-surface);
  --text-main: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-soft: var(--color-border-soft);
  --success: var(--color-success);
  --danger: var(--color-danger);
  --radius-sm: var(--radius-8);
  --radius-md: var(--radius-12);
  --radius-lg: var(--radius-16);
  --radius-xl: var(--radius-20);
}

html {
  direction: rtl;
}

body {
  font-family: var(--font-main);
  background: var(--bg-body);
  color: var(--text-main);
}

button,
input,
textarea,
select {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.22);
  outline-offset: 2px;
}

.btn,
.jagir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 42px;
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
}

.btn-primary,
.jagir-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-secondary,
.jagir-btn-secondary {
  background: var(--primary-soft);
  border-color: rgba(249, 115, 22, 0.18);
  color: var(--color-primary-text);
}

.btn-outline,
.jagir-btn-outline {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-main);
}

.btn-ghost,
.jagir-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-danger,
.jagir-btn-danger {
  background: var(--color-danger-soft);
  border-color: rgba(239, 68, 68, 0.16);
  color: var(--danger);
}

.form-control,
.jagir-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
}

.form-control::placeholder,
.jagir-input::placeholder {
  color: var(--text-muted);
}

.form-label,
.jagir-label {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.badge,
.status-pill,
.jagir-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 var(--space-12);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--color-surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.surface,
.section-card,
.jagir-surface {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.empty-state,
.empty-state-card,
.my-session-empty,
.calendar-fallback-empty,
.jagir-empty {
  background: var(--color-surface-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}

.sidebar-nav-item,
.btn-minimal,
.jagir-sidebar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
}

.sidebar-nav-item.is-active,
.btn-my-sessions.active,
.jagir-sidebar-item.is-active {
  background: var(--primary-soft);
  border-color: rgba(249, 115, 22, 0.18);
  color: var(--color-primary-text);
}