/*
 * Design Tokens — آپادانا پدیده
 * مرجع: DESIGN-SYSTEM.md
 * استفاده: enqueue در functions.php یا import در CSS لندینگ
 */

:root {
  /* ── رنگ‌های اصلی ── */
  --ap-primary:        #D40000;
  --ap-primary-action: #BD0B04;
  --ap-primary-hover:  #B00000;
  --ap-primary-dark:   #7A0000;

  /* ── خنثی ── */
  --ap-white:          #FFFFFF;
  --ap-bg-page:        #F9F9F9;
  --ap-bg-muted:       #F6F6F6;
  --ap-bg-input:       #F9F9F9;
  --ap-border:         #E0E0E2;
  --ap-border-light:   #EEEEEE;

  /* ── متن ── */
  --ap-text:           #333333;
  --ap-text-secondary: #666666;
  --ap-text-dark:      #2C2C2C;

  /* ── وضعیت ── */
  --ap-success:        #15C306;
  --ap-error:          #E74C3C;
  --ap-info:           #10507C;

  /* ── گرادیانت ── */
  --ap-gradient-main:       linear-gradient(135deg, #D40000 0%, #7A0000 100%);
  --ap-gradient-main-hover: linear-gradient(135deg, #A80000 0%, #5A0000 100%);

  /* ── تایپوگرافی ── */
  --ap-font:           'iranyekan', 'IRANYekanX', sans-serif;
  --ap-font-features:  "lnum", "ss02";

  /* ── شعاع ── */
  --ap-radius-sm:      8px;
  --ap-radius-base:    14px;
  --ap-radius-lg:      20px;
  --ap-radius-xl:      35px;
  --ap-radius-round:   50px;

  /* ── سایه ── */
  --ap-shadow-sm:      0 0 4px -2px rgba(0, 0, 0, 0.25);
  --ap-shadow-md:      0 0 10px -6px rgba(0, 0, 0, 0.35);
  --ap-shadow-lg:      0 8px 20px rgba(0, 0, 0, 0.10);
  --ap-shadow-hover:   0 16px 32px rgba(0, 0, 0, 0.08);

  /* ── فاصله ── */
  --ap-space-xs:       4px;
  --ap-space-sm:       8px;
  --ap-space-md:       16px;
  --ap-space-lg:       24px;
  --ap-space-xl:       32px;
  --ap-space-2xl:      48px;
  --ap-space-section:  80px;
  --ap-container:      1200px;

  /* ── ترنزیشن ── */
  --ap-transition:     all 0.3s ease-in-out;
}

/* ── Utility Classes ── */

.ap-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ap-primary-action);
  color: var(--ap-white);
  font-family: var(--ap-font);
  font-feature-settings: var(--ap-font-features);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 32px;
  border: none;
  border-radius: var(--ap-radius-base);
  cursor: pointer;
  transition: var(--ap-transition);
  text-decoration: none;
  direction: rtl;
}

.ap-btn-primary:hover {
  background: var(--ap-primary-hover);
  color: var(--ap-white);
}

.ap-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--ap-primary);
  font-family: var(--ap-font);
  font-feature-settings: var(--ap-font-features);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border: 2px solid var(--ap-primary);
  border-radius: var(--ap-radius-base);
  cursor: pointer;
  transition: var(--ap-transition);
  text-decoration: none;
  direction: rtl;
}

.ap-btn-secondary:hover {
  background: var(--ap-primary);
  color: var(--ap-white);
}

.ap-card {
  background: var(--ap-white);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-md);
  padding: var(--ap-space-card, 20px);
  transition: var(--ap-transition);
}

.ap-card:hover {
  box-shadow: var(--ap-shadow-hover);
}

.ap-section {
  padding: var(--ap-space-section) 0;
}

.ap-section--muted {
  background: var(--ap-bg-page);
}

.ap-eyebrow {
  font-family: var(--ap-font);
  font-size: 0.875rem;
  color: var(--ap-text-secondary);
  margin-bottom: 8px;
}

.ap-input {
  width: 100%;
  background: var(--ap-bg-input);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-base);
  padding: 12px 16px;
  font-family: var(--ap-font);
  font-feature-settings: var(--ap-font-features);
  font-size: 1rem;
  color: var(--ap-text);
  direction: rtl;
  transition: var(--ap-transition);
}

.ap-input:focus {
  border-color: #414141;
  background: var(--ap-white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.15);
}

.ap-container {
  max-width: var(--ap-container);
  margin: 0 auto;
  padding: 0 var(--ap-space-lg);
}

@media (max-width: 768px) {
  :root {
    --ap-space-section: 48px;
  }

  .ap-btn-primary,
  .ap-btn-secondary {
    width: 100%;
    text-align: center;
  }
}