/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/styles/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

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

/* Ensure ALL form elements inherit the Persian typography system */
button,
input,
select,
textarea,
optgroup,
option {
  font-family: inherit;
}

button {
  background-color: transparent;
  background-image: none;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media (max-width: 768px) {
  /* Prevent iOS Safari from zooming in on input focus when font-size < 16px */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  color-scheme: light dark;
  overflow-x: hidden;
  width: 100%;
}

html, body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  background-image: var(--bg-page-gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--text-primary);
  direction: rtl;
  text-align: right;
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Shared heading for public pages. Keep page identity clear and consistent. */
.site-page-header {
  padding-block: var(--space-8) var(--space-6);
  margin-bottom: var(--space-6);
  text-align: right;
}

.site-page-header--embedded {
  padding-block: 0;
}

.site-page-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  font-weight: var(--font-bold);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.site-page-subtitle {
  max-width: 760px;
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--slate-400);
}

/* Accessibility: Skip to Content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  right: var(--space-4);
  background-color: var(--primary-700);
  color: #ffffff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  z-index: var(--z-tooltip);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: var(--space-4);
  outline: 3px solid var(--accent-400);
}

/* High Contrast Focus Visibility (Supports Standard & High Contrast Mode) */
:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Reduced Motion Support (WCAG 2.2 AA SC 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen Reader Only Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Persian Numerals Feature */
.persian-numbers, [data-persian-numbers="true"] {
  font-feature-settings: "ss01" on;
}

/* Container Utility */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* Glassmorphism Surface */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
}

/* Card hover animation */
.gds-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal);
}

.gds-card-hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--primary-400) !important;
}

/* Interactive Button Micro-interactions */
button, .gds-button {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

button:active, .gds-button:active {
  transform: scale(0.975);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  transform: rotate(15deg);
}

/* Shimmer Animation Keyframe for Skeletons */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--slate-200) 25%,
    var(--slate-100) 50%,
    var(--slate-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Shared navigation lighting for tab-based public interfaces. */
@keyframes navigation-light-pulse {
  0%, 100% {
    box-shadow: 0 1px 5px rgba(2, 113, 199, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 3px 12px rgba(14, 143, 233, 0.36), inset 0 1px 2px rgba(255, 255, 255, 0.55);
  }
}

.dashboard-tab-lighting,
.filter-tab-lighting {
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

.dashboard-tab-lighting:hover:not(.is-active),
.filter-tab-lighting:hover:not(.is-active) {
  color: var(--primary-600) !important;
  background-color: rgba(2, 101, 184, 0.08) !important;
  border-color: rgba(2, 101, 184, 0.18) !important;
  box-shadow: 0 1px 5px rgba(2, 101, 184, 0.12);
}

.dashboard-tab-lighting.is-active,
.filter-tab-lighting.is-active {
  animation: navigation-light-pulse 3s infinite ease-in-out;
}

.faq-lighting {
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

.faq-lighting:hover {
  border-color: rgba(2, 101, 184, 0.28) !important;
  box-shadow: 0 3px 12px rgba(2, 101, 184, 0.1);
}

.faq-lighting.is-open {
  border-color: rgba(2, 101, 184, 0.32) !important;
  animation: navigation-light-pulse 3s infinite ease-in-out;
}

.faq-lighting-trigger:hover {
  background-color: rgba(2, 101, 184, 0.06) !important;
  color: var(--primary-600) !important;
}

/* Keep the homepage FAQ cards in sync with the lighting used by the FAQ tab. */
.faq-home-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

.faq-home-card:hover {
  border-color: rgba(2, 101, 184, 0.28) !important;
  box-shadow: 0 3px 12px rgba(2, 101, 184, 0.1);
}

.faq-home-card[open] {
  border-color: rgba(2, 101, 184, 0.32) !important;
  animation: navigation-light-pulse 3s infinite ease-in-out;
}

.faq-home-card summary:hover {
  background-color: rgba(2, 101, 184, 0.06) !important;
  color: var(--primary-600) !important;
}

/* Main calls to action share the same responsive light treatment as navigation. */
@keyframes button-light-pulse {
  0%, 100% {
    box-shadow: 0 5px 14px rgba(2, 113, 199, 0.26), inset 0 1px 1px rgba(255, 255, 255, 0.22);
  }
  50% {
    box-shadow: 0 8px 22px rgba(14, 143, 233, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.34);
  }
}

.gds-button-primary,
.gds-button-gold {
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.gds-button-primary:not([aria-disabled='true']):not(:disabled):hover,
.gds-button-gold:not([aria-disabled='true']):not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  animation: button-light-pulse 1.8s infinite ease-in-out;
}

/* Glassmorphism & Visual Polish Utilities */
.glass-panel {
  background: var(--bg-surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px -8px rgba(2, 101, 184, 0.15),
              0 2px 8px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(2, 101, 184, 0.18);
}

[data-theme='dark'] .hover-lift:hover {
  box-shadow: 0 8px 30px -8px rgba(56, 171, 248, 0.20),
              0 2px 8px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 171, 248, 0.25);
}

.glow-border {
  box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-sm);
}

/* Color-Themed Educational Card Utilities */
.card-theme-blue {
  background: var(--card-gradient-blue) !important;
  border-right: 4px solid var(--primary-600) !important;
  box-shadow: var(--shadow-card), var(--card-glow-blue) !important;
}

.card-theme-emerald {
  background: var(--card-gradient-emerald) !important;
  border-right: 4px solid var(--success-600) !important;
  box-shadow: var(--shadow-card), var(--card-glow-emerald) !important;
}

.card-theme-amber {
  background: var(--card-gradient-amber) !important;
  border-right: 4px solid var(--accent-600) !important;
  box-shadow: var(--shadow-card), var(--card-glow-amber) !important;
}

.card-theme-purple {
  background: var(--card-gradient-purple) !important;
  border-right: 4px solid var(--purple-600) !important;
  box-shadow: var(--shadow-card), var(--card-glow-purple) !important;
}

[data-theme='dark'] .card-theme-blue {
  border-right-color: var(--primary-400) !important;
}

[data-theme='dark'] .card-theme-emerald {
  border-right-color: var(--success-text) !important;
}

[data-theme='dark'] .card-theme-amber {
  border-right-color: var(--accent-500) !important;
}

[data-theme='dark'] .card-theme-purple {
  border-right-color: var(--purple-500) !important;
}

/* Home Page Vibrant Sections & Seamless Dark Mode Adaptation */
.home-hero-glow {
  background:
    radial-gradient(ellipse 700px 380px at 50% 10%, rgba(37, 99, 235, 0.08) 0%, transparent 70%),
    radial-gradient(circle 500px at 88% 45%, rgba(2, 132, 199, 0.08) 0%, transparent 65%),
    radial-gradient(circle 500px at 12% 45%, rgba(16, 185, 129, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
[data-theme='dark'] .home-hero-glow {
  background:
    radial-gradient(ellipse 800px 400px at 50% 10%, rgba(56, 189, 248, 0.1) 0%, transparent 70%),
    radial-gradient(circle 550px at 88% 45%, rgba(56, 189, 248, 0.12) 0%, transparent 65%),
    radial-gradient(circle 550px at 12% 45%, rgba(52, 211, 153, 0.1) 0%, transparent 65%),
    linear-gradient(180deg, #080d1a 0%, #0d1527 50%, #080d1a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-flank-card {
  border-radius: 16px;
  color: #ffffff;
  text-align: right;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-flank-card:hover { transform: translateY(-3px); }

.hero-layout-grid {
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  grid-gap: var(--space-5);
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 1080px) {
  .hero-layout-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-center-col { order: 1 !important; }
  .hero-flank-right { order: 2 !important; }
  .hero-flank-left { order: 3 !important; }
  .hero-flank-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    grid-gap: var(--space-3) !important;
    gap: var(--space-3) !important;
  }
}

.home-stats-section {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 50%, #fde68a 100%);
  border-top: 1px solid rgba(217, 119, 6, 0.25);
  border-bottom: 1px solid rgba(217, 119, 6, 0.25);
}
[data-theme='dark'] .home-stats-section {
  background: linear-gradient(135deg, #1c1408 0%, #291c0a 50%, #1c1408 100%);
  border-top: 1px solid rgba(251, 191, 36, 0.25);
  border-bottom: 1px solid rgba(251, 191, 36, 0.25);
}
.home-stat-card {
  background: #ffffff;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.15);
}
[data-theme='dark'] .home-stat-card {
  background: rgba(30, 24, 16, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.25);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
.home-faq-section {
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(14, 165, 233, 0.15);
}
[data-theme='dark'] .home-faq-section {
  background: linear-gradient(180deg, #090e1a 0%, #0c1527 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.home-steps-section {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.7) 0%, rgba(238, 242, 255, 0.75) 50%, rgba(241, 245, 249, 0.7) 100%);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
[data-theme='dark'] .home-steps-section {
  background: linear-gradient(180deg, #090e1a 0%, #0d1527 50%, #090e1a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.step-card-box {
  background: var(--bg-surface);
  border-radius: 18px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.step-card-box:hover { transform: translateY(-4px); }
.step-pill-blue {
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #0284c7;
}
[data-theme='dark'] .step-pill-blue {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}
.step-pill-emerald {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #059669;
}
[data-theme='dark'] .step-pill-emerald {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}
.step-pill-amber {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #d97706;
}
[data-theme='dark'] .step-pill-amber {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
.home-cta-wrap { background: #f8fafc; }
[data-theme='dark'] .home-cta-wrap { background: #080d18; }

/* Mobile Responsive Utility Classes */
@media (max-width: 640px) {
  .mobile-flex-col {
    flex-direction: column !important;
  }
  .mobile-flex-col-reverse {
    flex-direction: column-reverse !important;
  }
  .mobile-full-width {
    width: 100% !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .mobile-text-center {
    text-align: center !important;
  }
  .mobile-p-4 {
    padding: var(--space-4) !important;
  }
  .mobile-p-3 {
    padding: var(--space-3) !important;
  }
  .mobile-gap-2 {
    gap: var(--space-2) !important;
  }
}

/* ==========================================================================
   Official Receipt Print Optimization
   Isolates the official receipt card, hides backdrops, buttons, nav, steppers,
   and prevents unwanted 2nd pages or duplicate renderings.
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 12mm;
  }

  html,
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide all buttons, navigation, headers, footers, steps */
  nav,
  header,
  footer,
  aside,
  button,
  .no-print,
  .no-print * {
    display: none !important;
    visibility: hidden !important;
  }

  /* Hide background elements by default */
  body * {
    visibility: hidden;
  }

  /* Make only the official receipt card visible */
  .printable-receipt-card,
  .printable-receipt-card * {
    visibility: visible;
  }

  /* Clean receipt layout on print paper */
  .printable-receipt-card {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 1.5px solid #034d82 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Modal backdrop reset for print */
  .receipt-modal-backdrop {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .receipt-modal-dialog {
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Honors Compact Grid Responsive Layout */
@media (max-width: 960px) {
  .honors-compact-grid {
    grid-template-columns: 1fr !important;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"src":[{"path":"../fonts/Vazirmatn-Regular.woff2","weight":"400","style":"normal"},{"path":"../fonts/Vazirmatn-Medium.woff2","weight":"500","style":"normal"},{"path":"../fonts/Vazirmatn-SemiBold.woff2","weight":"600","style":"normal"},{"path":"../fonts/Vazirmatn-Bold.woff2","weight":"700","style":"normal"},{"path":"../fonts/Vazirmatn-Black.woff2","weight":"900","style":"normal"}],"variable":"--font-vazirmatn","display":"swap"}],"variableName":"vazirmatn"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__vazirmatn_883aa7';
src: url(/_next/static/media/77a5213e6c4f1531-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: '__vazirmatn_883aa7';
src: url(/_next/static/media/2c8554bdab87ece2-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: '__vazirmatn_883aa7';
src: url(/_next/static/media/c9f82b62003923c5-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: '__vazirmatn_883aa7';
src: url(/_next/static/media/0b7b20f60296dc0e-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: '__vazirmatn_883aa7';
src: url(/_next/static/media/5bb88b962ce9ac51-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 900;
font-style: normal;
}@font-face {font-family: '__vazirmatn_Fallback_883aa7';src: local("Arial");ascent-override: 101.52%;descent-override: 53.18%;line-gap-override: 0.00%;size-adjust: 101.00%
}.__className_883aa7 {font-family: '__vazirmatn_883aa7', '__vazirmatn_Fallback_883aa7'
}.__variable_883aa7 {--font-vazirmatn: '__vazirmatn_883aa7', '__vazirmatn_Fallback_883aa7'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/styles/design-tokens.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Ghalamchi Design System (GDS) - Tokens & Dynamic Themes
 * Modern, accessible, RTL-first design tokens with native Dark Mode support.
 */

:root {
  /* Typography */
  --font-sans: var(--font-vazirmatn), 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Primary Brand - Kanoon Deep Educational Blue */
  --primary-50: #f0f7ff;
  --primary-100: #e0effe;
  --primary-200: #bae0fd;
  --primary-300: #7cc7fc;
  --primary-400: #38abf8;
  --primary-500: #0ea5e9;
  --primary-600: #0265b8;
  --primary-700: #035296;
  --primary-800: #093d6e;
  --primary-900: #0c365f;
  --primary-950: #07223e;

  /* Accent Brand - Academic Amber / Gold */
  --accent-50: #fffbeb;
  --accent-100: #fef3c7;
  --accent-200: #fde68a;
  --accent-300: #fcd34d;
  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #d97706;
  --accent-700: #b45309;
  --accent-800: #92400e;
  --accent-900: #78350f;

  /* Neutral Slate (Light Defaults) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Semantic - Light Theme Colors & Ambient Canvas */
  --bg-page: #f8fafc;
  --bg-page-gradient:
    radial-gradient(circle 900px at 50% 0%, rgba(2, 132, 199, 0.08) 0%, transparent 60%),
    radial-gradient(circle 700px at 85% 25%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
    radial-gradient(circle 700px at 15% 45%, rgba(147, 51, 234, 0.06) 0%, transparent 50%),
    radial-gradient(circle 800px at 80% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
    #f8fafc;
  --bg-section-hero: transparent;
  --bg-section-alt: transparent;
  --border-section-alt: transparent;
  --bg-surface: rgba(255, 255, 255, 0.85);
  --bg-surface-elevated: #ffffff;
  --bg-surface-glass: rgba(255, 255, 255, 0.85);
  --bg-subtle: rgba(230, 238, 248, 0.8);
  --bg-footer: linear-gradient(180deg, #eaf2fb 0%, #dde8f5 100%);
  --footer-text: #334155;
  --footer-heading: #0f172a;
  --footer-link: #475569;
  --footer-link-hover: var(--primary-600);
  --footer-muted: #64748b;
  --footer-accent: var(--primary-600);
  --footer-status: var(--success-text);
  --footer-divider: var(--border-subtle);
  --footer-border: var(--border-subtle);
  --footer-shadow: 0 -1px 3px 0 rgba(15, 23, 42, 0.04);
  --border-subtle: rgba(2, 101, 184, 0.08);
  --border-strong: rgba(2, 101, 184, 0.14);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;

  /* Card Surfaces: Softly tinted, colorful accents (Light) */
  --card-gradient-blue: linear-gradient(135deg, #ffffff 0%, #eef5fc 100%);
  --card-gradient-emerald: linear-gradient(135deg, #ffffff 0%, #eefbf3 100%);
  --card-gradient-amber: linear-gradient(135deg, #ffffff 0%, #fef9ec 100%);
  --card-gradient-purple: linear-gradient(135deg, #ffffff 0%, #f4f0fc 100%);
  --card-glow-blue: 0 4px 24px -4px rgba(2, 101, 184, 0.14);
  --card-glow-emerald: 0 4px 24px -4px rgba(5, 150, 105, 0.14);
  --card-glow-amber: 0 4px 24px -4px rgba(217, 119, 6, 0.14);
  --card-glow-purple: 0 4px 24px -4px rgba(124, 58, 237, 0.14);

  /* Semantic - Success (Emerald) */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-bg: var(--success-50);
  --success-border: #bbf7d0;
  --success-text: var(--success-700);

  /* Semantic - Warning (Amber) */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-bg: var(--warning-50);
  --warning-border: #fde68a;
  --warning-text: var(--warning-700);

  /* Semantic - Error (Rose/Red) */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-bg: var(--error-50);
  --error-border: #fecaca;
  --error-text: var(--error-700);

  /* Semantic - Info (Sky) */
  --info-50: #f0f9ff;
  --info-100: #e0f2fe;
  --info-500: #0ea5e9;
  --info-600: #0284c7;
  --info-700: #0369a1;
  --info-bg: var(--info-50);
  --info-border: #bae6fd;
  --info-text: var(--info-700);

  /* Semantic - Purple (Sampad & Elite Mentorship) */
  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-bg: var(--purple-50);
  --purple-border: #ddd6fe;
  --purple-text: var(--purple-700);

  /* Spacing Scale */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 20px -3px rgba(2, 113, 199, 0.35);

  /* Card Shadows */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 12px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Accessibility & Focus */
  --focus-ring: 0 0 0 3px rgba(2, 113, 199, 0.35);
  --focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.35);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(226, 232, 240, 0.8);
  --glass-blur: blur(14px);

  /* Z-Index Hierarchy */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==============================================================================
 * DARK THEME TOKENS
 * Obsidian & Deep Navy Night Palette for true visual luxury and reduced eye strain
 * ============================================================================== */
[data-theme='dark'] {
  /* Surfaces & Ambient Obsidian Canvas */
  --bg-page: #080d18;
  --bg-page-gradient:
    radial-gradient(circle 900px at 50% 0%, rgba(56, 171, 248, 0.12) 0%, transparent 60%),
    radial-gradient(circle 700px at 85% 25%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
    radial-gradient(circle 700px at 15% 45%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(circle 800px at 80% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 50%),
    #080d18;
  --bg-section-hero: transparent;
  --bg-section-alt: transparent;
  --border-section-alt: transparent;
  --bg-surface: rgba(16, 24, 42, 0.78);
  --bg-surface-elevated: rgba(22, 32, 52, 0.85);
  --bg-subtle: rgba(22, 34, 56, 0.75);
  --bg-surface-glass: rgba(16, 24, 42, 0.78);
  --bg-footer: linear-gradient(180deg, #0d1627 0%, #070c16 100%);
  --footer-text: #cbd5e1;
  --footer-heading: #ffffff;
  --footer-link: #94a3b8;
  --footer-link-hover: #38bdf8;
  --footer-muted: #64748b;
  --footer-accent: #fbbf24;
  --footer-status: #4ade80;
  --footer-divider: rgba(255, 255, 255, 0.06);
  --footer-border: rgba(255, 255, 255, 0.06);
  --footer-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  /* Tinted Dark Cards with ambient glows */
  --card-gradient-blue: linear-gradient(135deg, rgba(16, 24, 42, 0.85) 0%, rgba(2, 101, 184, 0.10) 100%);
  --card-gradient-emerald: linear-gradient(135deg, rgba(16, 24, 42, 0.85) 0%, rgba(5, 150, 105, 0.10) 100%);
  --card-gradient-amber: linear-gradient(135deg, rgba(16, 24, 42, 0.85) 0%, rgba(217, 119, 6, 0.10) 100%);
  --card-gradient-purple: linear-gradient(135deg, rgba(16, 24, 42, 0.85) 0%, rgba(124, 58, 237, 0.10) 100%);
  --card-glow-blue: 0 4px 28px -4px rgba(56, 171, 248, 0.20);
  --card-glow-emerald: 0 4px 28px -4px rgba(74, 222, 128, 0.18);
  --card-glow-amber: 0 4px 28px -4px rgba(251, 191, 36, 0.18);
  --card-glow-purple: 0 4px 28px -4px rgba(167, 139, 250, 0.20);

  /* Re-map Slate scale so existing var(--slate-*) tokens convert gracefully */
  --slate-50: #0a0e17;
  --slate-100: #111827;
  --slate-200: #1a2234;
  --slate-300: #2d3c54;
  --slate-400: #94a3b8;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #e2e8f0;
  --slate-800: #f1f5f9;
  --slate-900: #f8fafc;
  --slate-950: #ffffff;

  /* Primary Brand adapts with higher luminance for dark mode */
  --primary-50: rgba(14, 143, 233, 0.14);
  --primary-100: rgba(14, 143, 233, 0.22);
  --primary-200: #0c406e;
  --primary-300: #0271c7;
  --primary-400: #0e8fe9;
  --primary-500: #38abf8;
  --primary-600: #60a5fa;
  --primary-700: #93c5fd;
  --primary-800: #bfdbfe;
  --primary-900: #dbeafe;
  --primary-950: #eff6ff;

  /* Accent Gold for dark mode */
  --accent-50: rgba(245, 158, 11, 0.14);
  --accent-100: rgba(245, 158, 11, 0.22);
  --accent-500: #fbbf24;
  --accent-600: #fcd34d;
  --accent-700: #fde68a;
  --accent-800: #fef3c7;
  --accent-900: #fffbeb;

  /* Semantic - Success */
  --success-50: rgba(34, 197, 94, 0.14);
  --success-bg: rgba(34, 197, 94, 0.14);
  --success-border: rgba(34, 197, 94, 0.32);
  --success-text: #4ade80;

  /* Semantic - Warning */
  --warning-50: rgba(245, 158, 11, 0.14);
  --warning-bg: rgba(245, 158, 11, 0.14);
  --warning-border: rgba(245, 158, 11, 0.32);
  --warning-text: #fbbf24;

  /* Semantic - Error */
  --error-50: rgba(239, 68, 68, 0.14);
  --error-bg: rgba(239, 68, 68, 0.14);
  --error-border: rgba(239, 68, 68, 0.32);
  --error-text: #f87171;

  /* Semantic - Purple (Sampad & Elite Mentorship) */
  --purple-50: rgba(139, 92, 246, 0.14);
  --purple-100: rgba(139, 92, 246, 0.22);
  --purple-500: #a78bfa;
  --purple-600: #c4b5fd;
  --purple-700: #ddd6fe;
  --purple-bg: rgba(139, 92, 246, 0.14);
  --purple-border: rgba(139, 92, 246, 0.32);
  --purple-text: #c4b5fd;

  /* Shadows for dark mode */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.09);
  --shadow-glow: 0 0 25px -2px rgba(56, 171, 248, 0.4);

  --shadow-card: 0 2px 10px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card-hover: 0 16px 32px -4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 171, 248, 0.35);

  /* Glassmorphism for dark mode */
  --glass-bg: rgba(15, 23, 42, 0.85);
  --glass-border: rgba(255, 255, 255, 0.09);

  /* Focus ring for dark mode */
  --focus-ring: 0 0 0 3px rgba(56, 171, 248, 0.4);
}