:root {
  color-scheme: light;
  --mx-brand: #65a30d;
  --mx-brand-strong: #365314;
  --mx-brand-subtle: #ecfccb;
  --mx-accent: #f97316;
  --mx-heading: #111827;
  --mx-body: #4b5563;
  --mx-muted: #6b7280;
  --mx-canvas: #f3f4f6;
  --mx-surface: #ffffff;
  --mx-border: #e5e7eb;
  --mx-danger: #b91c1c;
  --mx-success: #166534;
  --mx-font-sans: Vazirmatn, Tahoma, Arial, sans-serif;
  --mx-text-base: 1rem;
  --mx-radius-control: 0.5rem;
  --mx-radius-card: 0.75rem;
  --mx-radius-panel: 1rem;
  --mx-space-1: 0.25rem;
  --mx-space-2: 0.5rem;
  --mx-space-3: 0.75rem;
  --mx-space-4: 1rem;
  --mx-space-6: 1.5rem;
  --mx-space-8: 2rem;
  --mx-content-width: 72rem;
  --mx-focus-ring: 0 0 0 3px rgb(101 163 13 / 35%);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--mx-body);
  background: var(--mx-canvas);
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-base);
  line-height: 1.7;
}

a { color: var(--mx-brand-strong); text-underline-offset: 0.2em; }
a:hover { color: var(--mx-brand); }
a:focus-visible, button:focus-visible { outline: 0; box-shadow: var(--mx-focus-ring); }

.container { width: min(calc(100% - 2rem), var(--mx-content-width)); margin-inline: auto; }
.site-header, .site-footer { background: var(--mx-surface); }
.site-header { border-bottom: 1px solid var(--mx-border); }
.site-header__inner, .site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-4); min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: var(--mx-space-2); color: var(--mx-heading); font-weight: 800; text-decoration: none; }
.brand__mark { display: grid; width: 2.4rem; aspect-ratio: 1; place-items: center; border-radius: var(--mx-radius-control); background: var(--mx-brand-strong); color: white; }
.primary-nav__list { display: flex; flex-wrap: wrap; gap: var(--mx-space-4); margin: 0; padding: 0; list-style: none; }
.primary-nav__list a { color: var(--mx-body); text-decoration: none; }
.page-shell { min-height: 68vh; padding-block: clamp(2rem, 6vw, 5rem); }
.hero-card, .content-card { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-panel); background: var(--mx-surface); box-shadow: 0 1px 2px rgb(17 24 39 / 4%); }
.hero-card { max-width: 48rem; margin-inline: auto; }
.error-card { text-align: center; }
.page-title, h1, h2, h3 { color: var(--mx-heading); line-height: 1.35; }
.page-title a { color: inherit; text-decoration: none; }
.eyebrow { color: var(--mx-brand); font-size: 0.875rem; font-weight: 700; }
.button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0.625rem 1rem; border: 1px solid transparent; border-radius: var(--mx-radius-control); font: inherit; font-weight: 700; text-decoration: none; }
.button--primary { background: var(--mx-brand); color: #fff; }
.button--primary:hover { background: var(--mx-brand-strong); color: #fff; }
.site-footer { border-top: 1px solid var(--mx-border); }
.site-footer__inner { min-height: 4rem; font-size: 0.875rem; }
.site-footer p { margin: 0; }
.skip-link { position: absolute; z-index: 10; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; transform: translateY(-150%); padding: 0.5rem 0.75rem; border-radius: var(--mx-radius-control); background: var(--mx-surface); }
.skip-link:focus { transform: translateY(0); }

@media (max-width: 42rem) {
  .site-header__inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 0.75rem; }
  .primary-nav__list { gap: var(--mx-space-3); font-size: 0.9rem; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 0.75rem; }
}