/* Vazirmatn is served from assets/fonts — no third-party request, no DNS or TLS
   handshake to Google before text can paint. font-display: swap so the fallback
   shows instantly and is replaced when the woff2 lands. */
/* Only the four weights the stylesheets actually ask for. Light (300) and
   ExtraBold (800) were declared but no rule ever selected them, so the files
   were dead weight in the repo and two extra @font-face blocks to parse. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f5f8f9;
  --surface: #ffffff;
  --surface-2: #eef4f6;
  --surface-3: #dde8ec;
  --overlay: rgba(12, 32, 40, 0.45);

  --text: #0f2027;
  --text-2: #46606a;
  --text-3: #6d858e;

  --border: #dfe8eb;
  --border-soft: #edf3f5;
  --border-strong: #bfd2d8;

  --primary: #0f4c5c;
  --primary-deep: #0a3644;
  --primary-hover: #14606f;
  --primary-soft: rgba(15, 76, 92, 0.1);
  --primary-ring: rgba(23, 124, 145, 0.35);
  --on-primary: #ffffff;

  --secondary: #177c91;
  --secondary-soft: rgba(23, 124, 145, 0.14);
  --accent: #177c91;
  --accent-2: #2e9bb0;
  --accent-soft-brand: rgba(46, 155, 176, 0.16);

  --success: #17876b;
  --success-soft: rgba(23, 135, 107, 0.13);
  --warning: #c2760c;
  --warning-soft: rgba(194, 118, 12, 0.14);
  --danger: #c0392f;
  --danger-soft: rgba(192, 57, 47, 0.12);
  --info: #1b7f9e;
  --info-soft: rgba(27, 127, 158, 0.13);
  --violet: #5b6bb5;
  --violet-soft: rgba(91, 107, 181, 0.14);

  --c1: #0f4c5c;
  --c2: #2e9bb0;
  --c3: #c2760c;
  --c4: #5b6bb5;
  --c5: #17876b;
  --c6: #c0392f;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(12, 32, 40, 0.05);
  --sh-2: 0 4px 14px rgba(12, 32, 40, 0.07);
  --sh-3: 0 12px 30px rgba(12, 32, 40, 0.1);
  --sh-pop: 0 18px 44px rgba(12, 32, 40, 0.14);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  --dur: 200ms;
  --dur-fast: 140ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --sidebar-w: 258px;
  --sidebar-w-mini: 76px;
  --topbar-h: 66px;
  --bottomnav-h: 68px;

  --z-base: 1;
  --z-pop: 10;
  --z-sticky: 20;
  --z-drawer: 60;
  --z-modal: 100;
  --z-toast: 200;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;

  touch-action: manipulation;
}

button,
a,
label,
summary,
[role='button'],
[role='tab'],
[data-dd-toggle] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  font-family: 'Vazirmatn', system-ui, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--primary-soft);
  color: var(--text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: content-box;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 24px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 17px;
}
h4 {
  font-size: 15px;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
}

.mono {
  font-family: 'Vazirmatn', ui-monospace, 'Cascadia Mono', monospace;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

.t-2 {
  color: var(--text-2);
}
.t-3 {
  color: var(--text-3);
}
.t-success {
  color: var(--success);
}
.t-danger {
  color: var(--danger);
}
.t-warning {
  color: var(--warning);
}
.t-primary {
  color: var(--primary);
}

.fs-11 {
  font-size: 11px;
}
.fs-12 {
  font-size: 12px;
}
.fs-13 {
  font-size: 13px;
}
.fs-14 {
  font-size: 14px;
}
.fs-16 {
  font-size: 16px;
}
.fs-18 {
  font-size: 18px;
}
.fs-22 {
  font-size: 22px;
}

.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}

.row {
  display: flex;
  align-items: center;
}
.col {
  display: flex;
  flex-direction: column;
}
.wrap {
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.center {
  justify-content: center;
}
.end {
  justify-content: flex-end;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.grow {
  flex: 1;
}
.g-1 {
  gap: var(--s-1);
}
.g-2 {
  gap: var(--s-2);
}
.g-3 {
  gap: var(--s-3);
}
.g-4 {
  gap: var(--s-4);
}
.g-5 {
  gap: var(--s-5);
}
.g-6 {
  gap: var(--s-6);
}

.mt-2 {
  margin-top: var(--s-2);
}
.mt-3 {
  margin-top: var(--s-3);
}
.mt-4 {
  margin-top: var(--s-4);
}
.mt-5 {
  margin-top: var(--s-5);
}
.mt-6 {
  margin-top: var(--s-6);
}
.mb-2 {
  margin-bottom: var(--s-2);
}
.mb-3 {
  margin-bottom: var(--s-3);
}
.mb-4 {
  margin-bottom: var(--s-4);
}
.mb-5 {
  margin-bottom: var(--s-5);
}
.mb-6 {
  margin-bottom: var(--s-6);
}

.grid {
  display: grid;
  gap: var(--s-5);
}
.g-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.span-2 {
  grid-column: span 2;
}

.hidden,
[hidden] {
  display: none !important;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Clipped rather than parked at -9999px: in an RTL document that offset
   resolves to `right: -9999px`, which pushes the link past the right edge and
   gives every page a phantom horizontal scroll. Clipping hides it with no
   geometry at all, and it still reaches screen readers and keyboard focus. */
.skip-link {
  position: absolute;
  top: 0;
  inset-inline-start: 12px;
  z-index: 999;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

@media (max-width: 1200px) {
  .g-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .g-cols-3,
  .g-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .span-2 {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .g-cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  body {
    font-size: 14.5px;
  }
}

/* Mobile browsers zoom the viewport when a focused control is under 16px.
   Keeping every control at 16px removes that jump without disabling pinch-zoom. */
@media (max-width: 860px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}