/* ===========================

   Design tokens & sensible defaults

   =========================== */

:root {

  /* Brand colors (override in a theme file if needed) */

  --primary: #0d6efd;

  --primary-dark: #0b5ed7;

  --gold: #c9a227;



  --text: #333333;

  --bg: #ffffff;

  --muted: #6b7280;



  /* Typography */

  --font-body: 'Modam', 'iranYekan', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-base: 16px;

  --lh-base: 1.6;



  /* Radius & elevation */

  --radius: 8px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);

  --shadow-md: 0 6px 16px rgba(0, 0, 0, .08);

}



/* Optional: automatic dark scheme (tweak if you adopt dark mode) */

/*

  @media (prefers-color-scheme: dark) {

    :root {

      --bg: #0b0f14;

      --text: #e6e8eb;

      --muted: #94a3b8;

    }

  }

  */



/* ===========================

    Modern reset (preserves useful defaults)

     =========================== */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  -webkit-text-size-adjust: 100%;

}



body {

  margin: 0;

  font-family: var(--font-body);

  font-size: var(--fs-base);

  line-height: var(--lh-base);

  background-color: var(--bg);

  color: var(--text);

  direction: rtl;

  /* Change per-page if needed */

}



/* Remove default list bullets and spacing */

ul {

  list-style: none;

}



/* Links with accessible focus and subtle motion */

a {

  color: var(--primary);

  text-decoration: none;

  transition: color .2s ease, transform .2s ease;

}



a:hover {

  color: var(--gold);

  transform: translateY(-2px);

}



a:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 2px;

  border-radius: 4px;

}



/* Responsive images without layout shift */

img {

  max-width: 100%;

  height: auto;

  display: block;

}



/* Buttons: keep it simple and accessible */

button {

  font-family: 'Modam', Arial, sans-serif;

  background-color: var(--primary);

  color: #fff;

  border: none;

  padding: 10px 20px;

  border-radius: var(--radius);

  cursor: pointer;

  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;

  box-shadow: var(--shadow-sm);

}



button:hover {

  background-color: var(--primary-dark);

}



button:active {

  transform: translateY(1px);

}



button:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 2px;

}



/* Inputs inherit typography and show focus ring */

input,

textarea,

select {

  font-family: 'Modam', Arial, sans-serif;

  font-size: 1rem;

}



input:focus-visible,

textarea:focus-visible,

select:focus-visible {

  outline: 2px solid var(--primary);

  outline-offset: 2px;

}



/* ===========================

    Layout helpers (logical props for RTL/LTR)

     =========================== */

/* Fluid container with equal side paddings */

.container {

  max-width: 1320px;

  margin-inline: auto;

  /* RTL/LTR aware */

  padding-inline: 20px;

  /* equal left/right spacing logically */

}



/* Responsive container tightening */

@media (max-width: 992px) {

  .container {

    max-width: 960px;

  }

}



@media (max-width: 768px) {

  .container {

    max-width: 720px;

    padding-inline: 16px;

  }

}



@media (max-width: 576px) {

  .container {

    max-width: 100%;

    padding-inline: 12px;

  }

}



/* Page sections spacing (optional defaults) */

section {

  padding-block: 40px;

}



@media (max-width: 576px) {

  section {

    padding-block: 28px;

  }

}



/* ===========================

     Accessibility & UX niceties

     =========================== */

/* Reduce motion for motion-sensitive users */

@media (prefers-reduced-motion: reduce) {



  *,

  *::before,

  *::after {

    animation: none !important;

    transition: none !important;

  }

}



/* Visually hidden content (screen-reader only) */

.visually-hidden {

  position: absolute !important;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

  border: 0;

}



/* Text selection styling */

::selection {

  background: var(--primary);

  color: #fff;

}



/* ===========================

    Typography rhythm

     =========================== */

h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0 0 .6em;

  line-height: 1.25;

}



p {

  margin: 0 0 1em;

  color: var(--text);

}



small {

  color: var(--muted);

}