@layer base {
  @font-face {
    font-family: "Vazirmatn";
    src:
      url("../fonts/vazirmatn/Vazirmatn-wght.f6d31671339d.woff2") format("woff2-variations"),
      url("../fonts/vazirmatn/Vazirmatn-wght.f6d31671339d.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
  }

  html:has(dialog[open]) {
    overflow: hidden;
  }

  body {
    margin: 0;
    min-block-size: 100dvh;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-16);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

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

  h1 {
    font-size: var(--text-h1);
  }

  h2 {
    font-size: var(--text-h2);
  }

  h3 {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
  }

  h4 {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
  }

  p {
    text-wrap: pretty;
  }

  /* Link policy.
     A link inside running text KEEPS its underline — WCAG 1.4.1 forbids colour as the
     only signal, and in a paragraph there is nothing else to go on. What made the page
     look like unstyled HTML was not the underline itself but its weight: a full-strength
     blue rule under every link. It is drawn at 35% of the text colour instead and fades
     to full on hover, which is a deliberate line rather than a browser default.
     UI links (nav items, table rows, cards, chips, back arrows) are identified by their
     box and position, so `.ui-link` below drops the underline entirely. */
  a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition:
      color var(--duration-micro) var(--ease-out),
      text-decoration-color var(--duration-micro) var(--ease-out);
  }

  a:hover {
    color: var(--color-primary-hover);
    text-decoration-color: currentColor;
  }

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

  img {
    block-size: auto;
  }

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

  ::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
  }

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

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

  [hidden] {
    display: none !important;
  }

  /* Cross-document page transition: a short cross-fade where supported. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-normal);
    animation-timing-function: var(--ease-out);
  }

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

    @view-transition {
      navigation: none;
    }
  }
}

@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
  }
}

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

  .num {
    font-variant-numeric: tabular-nums;
  }

  /* Latin/number values inside an RTL page (emails, slugs, order numbers, ranges).
     `direction: ltr` is required — a neutral between two numbers (e.g. "1.5 – 3.0")
     resolves to R under bidi rule N1 and the two numbers swap places without it.
     But on a BLOCK box that flip also re-resolves the inherited `text-align: start`
     to the LEFT edge, so a `.ltr` table cell or <dd> used to sit under the wrong
     column while its RTL neighbours hugged the right edge. `text-align: end` is the
     right edge *of this box's own ltr direction*, which is the page's start edge —
     so every value in a column lines up again, whatever its script. */
  .ltr {
    direction: ltr;
    unicode-bidi: isolate;
    /* Both of these mean "still start at the page's start edge": `end` and `flex-end`
       resolve against this box's own ltr direction, which is the RTL page's start.
       `justify-content` is inert unless the box is a flex container, and it has to be
       here because `text-align` does not reach flex items — a `.ltr` <dd> that is a flex
       row would otherwise drift to the opposite edge from its RTL neighbours. */
    text-align: end;
    justify-content: flex-end;
  }

  /* A link that is a piece of UI, not prose: its surrounding box already says it is
     clickable, so the underline is noise — including on hover. An underline that appears
     under the pointer makes the whole page twitch as the cursor crosses it, which is the
     opposite of calm; colour carries the hover state instead. */
  .ui-link {
    text-decoration: none;
  }

  .ui-link:hover {
    color: var(--color-primary-hover);
  }

  .text-secondary {
    color: var(--color-text-secondary);
  }
}