/* Base: font, document, browser surfaces. Logical properties only (RTL is native). */
@layer base {
  @font-face {
    font-family: "Vazirmatn";
    src: url("../vendor/vazirmatn/Vazirmatn-Subset.d840bd84a13e.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

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

  html {
    font-family: var(--font);
    font-size: 100%;
    line-height: var(--lh);
    color: var(--ink);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    accent-color: var(--blue-fill);
    caret-color: var(--blue);
    scrollbar-color: var(--line-strong) var(--bg);
    -webkit-tap-highlight-color: transparent;
  }

  body {
    margin: 0;
    min-block-size: 100dvh;
    text-align: start;
    font-size: var(--fs-16);
    overflow-wrap: break-word;
  }

  ::selection {
    background: var(--blue-wash);
    color: var(--ink);
  }

  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  dd,
  figure {
    margin: 0;
  }

  h1,
  h2,
  h3 {
    line-height: var(--lh-tight);
    font-weight: 700;
    text-wrap: balance;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }

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

  button {
    cursor: pointer;
    touch-action: manipulation;
  }

  button:disabled {
    cursor: not-allowed;
  }

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

  /* Persian digits come from the content layer (core.timefmt / |fa). Tabular figures only where
     numbers stand in a column (.tab); at display sizes proportional figures read better. */
  .tab {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--s-2);
    inset-block-start: var(--s-2);
    z-index: var(--z-toast);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    color: var(--ink);
    min-block-size: var(--target);
    border-radius: var(--r-control);
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  /* The sprite only holds <symbol>s; it must not take space or be announced. */
  .icon-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }

  [hidden],
  [x-cloak] {
    display: none !important;
  }

  /* Reduced motion keeps opacity and color changes (they explain state) and drops movement;
     the movement overrides live next to each component in components.css. */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}