/* =========================================================
   Shabani Tajhiz Design System
   Version: 0.2.0
   ========================================================= */

:root {
  /* Brand */
  --st-primary: #155eef;
  --st-primary-hover: #124ec7;
  --st-primary-soft: #eef4ff;

  --st-accent: #0ea5a4;
  --st-accent-soft: #ecfdfc;

  /* Neutral */
  --st-bg: #f7f9fc;
  --st-surface: #ffffff;
  --st-surface-soft: #f1f5f9;

  --st-text: #172033;
  --st-text-secondary: #475467;
  --st-muted: #667085;

  --st-border: #e4e7ec;
  --st-border-strong: #d0d5dd;

  /* Feedback */
  --st-success: #079455;
  --st-warning: #dc6803;
  --st-danger: #d92d20;

  /* Radius */
  --st-radius-sm: 10px;
  --st-radius-md: 14px;
  --st-radius-lg: 20px;
  --st-radius-xl: 28px;
  --st-radius-pill: 999px;

  /* Shadow */
  --st-shadow-xs:
    0 1px 2px rgba(16, 24, 40, 0.04);

  --st-shadow-sm:
    0 2px 8px rgba(16, 24, 40, 0.06);

  --st-shadow-md:
    0 8px 24px rgba(16, 24, 40, 0.08);

  --st-shadow-lg:
    0 16px 40px rgba(16, 24, 40, 0.10);

  /* Layout */
  --st-container: 1240px;
  --st-gutter: 24px;

  /* Motion */
  --st-transition:
    180ms cubic-bezier(.2, .8, .2, 1);
}

/* =========================================================
   Base
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--st-bg);
  color: var(--st-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family:
    "Vazirmatn",
    "IRANSansX",
    Tahoma,
    Arial,
    sans-serif;
}

a {
  color: var(--st-primary);
  transition:
    color var(--st-transition),
    opacity var(--st-transition);
}

a:hover {
  color: var(--st-primary-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Container
   ========================================================= */

.st-container {
  width: min(
    calc(100% - (var(--st-gutter) * 2)),
    var(--st-container)
  );
  margin-inline: auto;
}

/* =========================================================
   Typography
   ========================================================= */

.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 12px;

  background: var(--st-primary-soft);
  color: var(--st-primary);

  border-radius: var(--st-radius-pill);

  font-size: 13px;
  font-weight: 700;
}

.st-title {
  margin: 0;

  color: var(--st-text);

  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.st-section-title {
  margin: 0;

  color: var(--st-text);

  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.45;
  font-weight: 800;
}

.st-description {
  color: var(--st-text-secondary);

  font-size: 16px;
  line-height: 2;
}

/* =========================================================
   Buttons
   ========================================================= */

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 48px;
  padding: 11px 20px;

  border: 1px solid transparent;
  border-radius: var(--st-radius-md);

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    transform var(--st-transition),
    box-shadow var(--st-transition),
    background var(--st-transition),
    border-color var(--st-transition);
}

.st-btn:hover {
  transform: translateY(-1px);
}

.st-btn-primary {
  background: var(--st-primary);
  color: #fff;
  box-shadow: var(--st-shadow-sm);
}

.st-btn-primary:hover {
  background: var(--st-primary-hover);
  color: #fff;
  box-shadow: var(--st-shadow-md);
}

.st-btn-secondary {
  background: var(--st-surface);
  color: var(--st-text);

  border-color: var(--st-border);
}

.st-btn-secondary:hover {
  border-color: var(--st-border-strong);
  color: var(--st-text);
}

/* =========================================================
   Cards
   ========================================================= */

.st-card {
  background: var(--st-surface);

  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);

  box-shadow: var(--st-shadow-xs);

  transition:
    transform var(--st-transition),
    box-shadow var(--st-transition),
    border-color var(--st-transition);
}

.st-card:hover {
  transform: translateY(-3px);
  border-color: var(--st-border-strong);
  box-shadow: var(--st-shadow-md);
}

/* =========================================================
   Forms
   ========================================================= */

.st-input,
.st-select,
.st-textarea {
  width: 100%;

  background: var(--st-surface);
  color: var(--st-text);

  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);

  padding: 12px 14px;

  outline: none;

  transition:
    border-color var(--st-transition),
    box-shadow var(--st-transition);
}

.st-input:focus,
.st-select:focus,
.st-textarea:focus {
  border-color: var(--st-primary);

  box-shadow:
    0 0 0 4px rgba(21, 94, 239, 0.10);
}

/* =========================================================
   Accessibility
   ========================================================= */

:focus-visible {
  outline: 3px solid rgba(21, 94, 239, 0.35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --st-gutter: 16px;
  }

  .st-btn {
    min-height: 46px;
  }
}