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

:root {
  /* Brand */
  --st-navy: #0b1f3a;
  --st-primary: #2563eb;
  --st-primary-hover: #1d4ed8;
  --st-primary-soft: #eff6ff;

  --st-accent: #06b6d4;
  --st-accent-soft: #ecfeff;

  /* Neutral */
  --st-bg: #f6f8fc;
  --st-surface: #ffffff;
  --st-surface-soft: #f8fafc;

  --st-text: #172033;
  --st-text-secondary: #64748b;
  --st-muted: #94a3b8;

  --st-border: #e2e8f0;
  --st-border-strong: #cbd5e1;

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

  /* Radius */
  --st-radius-sm: 10px;
  --st-radius-md: 16px;
  --st-radius-lg: 22px;
  --st-radius-xl: 30px;
  --st-radius-pill: 999px;

  /* Shadow */
  --st-shadow-xs:
    0 1px 2px rgba(11, 31, 58, 0.04);

  --st-shadow-sm:
    0 4px 12px rgba(11, 31, 58, 0.06);

  --st-shadow-md:
    0 12px 32px rgba(11, 31, 58, 0.08);

  --st-shadow-lg:
    0 24px 64px rgba(11, 31, 58, 0.10);

  /* Layout */
  --st-container: 1280px;
  --st-gutter: 24px;
  --st-section-space: clamp(72px, 8vw, 120px);

  /* Typography */
  --st-font-size-xs: 12px;
  --st-font-size-sm: 14px;
  --st-font-size-base: 16px;
  --st-font-size-lg: 18px;
  --st-font-size-xl: 20px;
  --st-font-size-2xl: 24px;
  --st-font-size-3xl: 32px;
  --st-font-size-4xl: 42px;
  --st-font-size-5xl: 56px;

  --st-line-height-tight: 1.25;
  --st-line-height-normal: 1.7;
  --st-line-height-loose: 1.9;

  --st-font-weight-regular: 400;
  --st-font-weight-medium: 500;
  --st-font-weight-semibold: 600;
  --st-font-weight-bold: 700;

  /* Spacing */
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 20px;
  --st-space-6: 24px;
  --st-space-8: 32px;
  --st-space-10: 40px;
  --st-space-12: 48px;
  --st-space-16: 64px;

  /* Motion */
  --st-transition-fast:
    140ms cubic-bezier(.2, .8, .2, 1);
  --st-transition:
    220ms cubic-bezier(.2, .8, .2, 1);
  --st-transition-slow:
    360ms 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;
  }
}