@layer reset, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  table { border-collapse: collapse; width: 100%; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  html { font-size: 16px; scroll-behavior: smooth; background: var(--bg); }
  body {
    min-height: 100vh; min-height: 100dvh;
    font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base);
    font-weight: var(--fw-regular); color: var(--text-1);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  }
  /* Decorative backdrop: dot grid + accent glow (static, cheap) */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(55rem 32rem at 100% -8%, rgb(var(--accent-rgb) / .10), transparent 62%),
      radial-gradient(40rem 28rem at -10% 110%, rgb(var(--accent-rgb) / .06), transparent 60%),
      radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 22px 22px;
  }

  h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--text-1); text-wrap: balance; }
  h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-decoration: none; text-underline-offset: .2em; }
  a:hover { text-decoration: underline; }
  strong, b { font-weight: var(--fw-bold); }
  small { font-size: var(--fs-sm); }
  hr { border: 0; border-block-start: 1px solid var(--border); }
  ::selection { background: rgb(var(--accent-rgb) / .35); color: var(--text-1); }

  :focus { outline: none; }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

  /* LTR islands inside RTL text: phone numbers, coordinates, codes */
  .ltr, .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
  .num { font-variant-numeric: tabular-nums; }
  bdi { unicode-bidi: isolate; }
  .muted { color: var(--text-2); } .faint { color: var(--text-3); }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link {
    position: fixed; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: var(--z-tooltip);
    padding: var(--sp-2) var(--sp-4); background: var(--accent); color: var(--accent-on); border-radius: var(--r-md);
    transform: translateY(-200%); transition: transform var(--dur-base) var(--ease-out);
  }
  .skip-link:focus { transform: none; text-decoration: none; }

  .icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .icon--sm { width: 1rem; height: 1rem; } .icon--lg { width: 1.5rem; height: 1.5rem; } .icon--xl { width: 2rem; height: 2rem; }
  [dir="rtl"] .icon--flip { transform: scaleX(-1); }

  /* Slim scrollbars */
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

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