/* Shared UI contracts. Components own their decoration and imagery. */
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--canvas);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4, p, a, label, button) { overflow-wrap: break-word; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(main, .wrap, .a-main, .auth-form-pane) { min-width: 0; }
:where(button, input, select, textarea) { font-family: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 3px;
}
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--grape); }
:where(input, textarea)::placeholder { color: var(--ink-soft); opacity: .9; }
::selection { background: var(--grape-100); color: var(--ink); }
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost {
  min-height: 46px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  padding: 11px 20px;
  gap: 8px;
  max-width: 100%;
  white-space: normal;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary, a.btn-primary, button.btn-primary {
  background: var(--sun);
  color: var(--on-primary);
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgb(169 83 22 / .22);
  text-shadow: none;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
  background: #ffc65f;
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
  transform: none;
}
.btn-primary:active { background: #eaaa34; transform: none; }
.btn-secondary, a.btn-secondary, button.btn-secondary {
  background: var(--grape);
  color: var(--on-secondary);
  border: 1px solid transparent;
  box-shadow: none;
}
.btn-secondary:hover { background: var(--grape-deep); color: var(--on-secondary); }
.btn-outline, .btn-light, .btn-ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-outline:hover, .btn-light:hover, .btn-ghost:hover {
  background: var(--grape-100);
  border-color: var(--grape);
  color: var(--grape-deep);
  transform: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.text-link, .breadcrumb a { color: var(--grape); }
.text-link:hover, .breadcrumb a:hover { color: var(--grape-deep); text-decoration: underline; }
:where(.form-error, .field-error, .errorlist) { color: var(--berry); }
:where(.form-input, .form-select, .form-textarea):focus {
  border-color: var(--grape);
  --tw-ring-color: var(--grape);
}
.jjb-skip-link { background: #292340; color: #fff; }
.jjb-network-status { background: var(--sun-100); color: var(--ink); border-color: var(--line); }
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  .btn, .btn-primary, .btn-secondary, .btn-outline { min-height: 48px; }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
}
@media (max-width: 360px) { .wrap { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-secondary, .btn-outline { transition: none; }
}