:root {
  --ac: #F97316;
  --ac-h: #FB923C;
  --ac-a: #EA580C;
  --ac-soft: #f9731670;
  --ac-soft-h: #f97316b0;
  --bg: #111315;
  --panel: #171A1D;
  --card: #1D2125;
  --card-h: #22272C;
  --line: #34383D;
  --line-2: #2B2F35;
  --tx: #F5F5F5;
  --tx-2: #A8AFB7;
  --tx-3: #6E757D;
  --wrap: 1360px;
  --shade-1: rgba(17, 19, 21, 0);
  --shade-2: rgba(17, 19, 21, .45);
  --shade-3: #111315;
  --grad-dark: rgba(0, 0, 0, .95);
  --font: 'Vazirmatn FD', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

:root[data-theme="light"] {
  --bg: #F4F5F7;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --card-h: #F0F2F5;
  --line: #E2E5EA;
  --line-2: #EAECEF;
  --tx: #16181B;
  --tx-2: #55606B;
  --tx-3: #8A929B;
  --shade-1: rgba(244, 245, 247, 0);
  --shade-2: rgba(244, 245, 247, .45);
  --shade-3: #F4F5F7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--tx);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.8;
  overflow-x: hidden;
}

a { color: var(--ac); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ac-h); }

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }
picture { display: contents; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--ac); color: #fff; }
input::placeholder, textarea::placeholder { color: var(--tx-3); }

:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.dolox-root { min-height: 100vh; background: var(--bg); color: var(--tx); }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 999;
  width: auto;
  height: auto;
  clip: auto;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ac);
  color: #fff;
  font-weight: 700;
}

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