/* ============================= */
/* 🎯 1. Root Variables (Default Theme) */
/* ============================= */
:root {
  /* 🎨 رنگ‌های اصلی */
  --color-primary: #ff007f;
  --color-secondary: #00d4ff;

  /* 📋 رنگ‌های پایه */
  --color-bg: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;

  /* 🟦 باکس‌ها و کارت‌ها */
  --color-box-bg: #ffffff;
  --color-card-bg: #f5f5f5;
  --color-card-text: var(--color-text-primary);
  --color-box-border: rgba(0, 0, 0, 0.1);

  /* 🔘 دکمه‌ها */
  --color-btn-primary-bg: var(--color-primary);
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #d6006d;
  --color-btn-positive-bg: #28a745;
  --color-btn-positive-hover: #218838;
  --color-btn-negative-bg: #dc3545;
  --color-btn-negative-hover: #c82333;
  --color-btn-disabled-bg: #cccccc;
  --color-btn-disabled-text: #666666;
  --color-btn-active-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);

  /* 🔗 لینک‌ها */
  --color-link: var(--color-primary);
  --color-link-hover: #000000;

  /* 📐 گوشه‌ها و سایه‌ها */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* ✨ فونت و تایپوگرافی */
  --font-family-base: 'IRANSansX', sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.6;

  /* ⏳ ترنزیشن‌ها */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
}

/* ============================= */
/* 🎨 2. Theme Variations */
/* ============================= */
.theme-pink {
  --color-bg: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-card-bg: #fff7fb;
  --color-primary: #ff007f;
  --color-secondary: #ffdb4d;
}

.theme-blue {
  --color-bg: #f8fcff;
  --color-text-primary: #0d1b2a;
  --color-text-secondary: #33415c;
  --color-card-bg: #e7f7ff;
  --color-primary: #00d4ff;
  --color-secondary: #0077ff;
}

.theme-purple {
  --color-bg: #faf7ff;
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #55577a;
  --color-card-bg: #f3e8ff;
  --color-primary: #9d00ff;
  --color-secondary: #ff0099;
}

.dark-theme {
  --color-bg: #121212;
  --color-text-primary: #eeeeee;
  --color-text-secondary: #b3b3b3;
  --color-card-bg: #1e1e1e;
  --color-card-text: #f5f5f5;
  --color-box-border: rgba(255, 255, 255, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ============================= */
/* ✍ 3. Fonts */
/* ============================= */
@font-face {
  font-family: 'IRANSansX';
  src: url('/page/CSSJS/font/woff2/IRANSansX-Regular.woff2') format('woff2'),
       url('/page/CSSJS/font/woff/IRANSansX-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/page/CSSJS/font/woff2/IRANSansX-Bold.woff2') format('woff2'),
       url('/page/CSSJS/font/woff/IRANSansX-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* 🔹 BYekan */
@font-face {
  font-family: 'BYekan';
  src: url('/page/CSSJS/font/BYekan.woff?v=1.0.0') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 🔹 FontAwesome Light */
@font-face {
  font-family: 'FontAwesomeLight';
  src: url('/page/CSSJS/font/FontAwesome/fa-light-300.woff2?v=1.0.0') format('woff2'),
       url('/page/CSSJS/font/FontAwesome/fa-light-300.woff?v=1.0.0') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ============================= */
/* 🌐 4. Reset & Scrollbar */
/* ============================= */
*, *::before, *::after {
  direction: rtl;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  border: none;
  outline: none;
  text-decoration: none;
}

@supports (scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
  }
}

*::-webkit-scrollbar {
  width: 7px;
  background-color: #f0f0f2;
}

*::-webkit-scrollbar-thumb {
  background-color: #c1c2c6;
  border-radius: 45px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #a9aaae;
}

/* ============================= */
/* 🖥 5. Body */
/* ============================= */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--color-bg);
  transition: background-color var(--transition-normal), color var(--transition-normal);

  -moz-font-feature-settings: "ss03";
  -webkit-font-feature-settings: "ss03";
  font-feature-settings: "ss03";
}


.navbar{top:0;font-weight: bold; margin-bottom: 0; position: fixed;width: 100%;z-index:2000;}
.navbar-brand{color: white !important; font-size:22px;}
.header_space{
    margin-top: 70px;
}