/* ═══════════════════════════════════════════════════════════
   BASE.CSS — پایه سایت
   BASE.CSS — Site foundation
   
   سبک: ادیتوریال سوئیسی + مینیمال لوکس
   Style: Swiss editorial + luxury minimal
   
   فهرست / Table of Contents:
   01. Fonts           — فونت‌ها
   02. Color Tokens    — متغیرهای رنگ
   03. Typography      — تایپوگرافی
   04. Spacing         — فاصله‌ها
   05. Motion          — حرکت
   06. Shadows         — سایه‌ها
   07. Reset           — ریست
   08. Base Elements   — عناصر پایه
   09. Farsi           — تنظیمات فارسی
   10. Selection       — انتخاب متن
   11. Scrollbar       — اسکرول‌بار
   12. Utilities       — کلاس‌های کمکی
   13. Theme Transition— انتقال تم
   14. Mobile Tap      — حذف flash آبی
   15. Reduced Motion  — احترام به کاربر
   ═══════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   01. FONTS — فونت‌ها
   ─────────────────────────────────────────────────────────── */

/* ─── Estedad Regular (400) ─── */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Estedad Medium (500) ─── */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ─── Estedad SemiBold (600) ─── */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ─── Estedad Bold (700) ─── */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Estedad ExtraBold (800) ─── */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ───────────────────────────────────────────────────────────
   02. COLOR TOKENS — متغیرهای رنگ
   ─────────────────────────────────────────────────────────── */

/* ═══ Dark (پیش‌فرض) ═══ */
:root,
[data-theme="dark"] {

  /* ─── پس‌زمینه ─── */
  --bg:           #050505;
  --bg-soft:      #0D0D0D;
  --bg-card:      #141414;
  --bg-elevated:  #1A1A1A;

  /* ─── متن ─── */
  --fg:           #FAFAFA;
  --fg-muted:     #7A7A7A;
  --fg-dim:       #3D3D3D;
  --fg-faint:     #262626;

  /* ─── خطوط ─── */
  --border:       rgba(255, 255, 255, 0.08);
  --border-soft:  rgba(255, 255, 255, 0.04);
  --border-bold:  rgba(255, 255, 255, 0.16);

  /* ─── رنگ تاکید ─── */
  --accent:       #5A8FA0;
  --accent-soft:  #72A3B3;
  --accent-dim:   rgba(90, 143, 160, 0.15);
  --accent-glow:  rgba(90, 143, 160, 0.4);
}

/* ═══ Light ═══ */
[data-theme="light"] {

  /* ─── پس‌زمینه ─── */
  --bg:           #e8f1f2;
  --bg-soft:      #dee7eb;
  --bg-card:      #FFFFFF;
  --bg-elevated:  #FFFFFF;

  /* ─── متن ─── */
  --fg:           #0A0A0A;
  --fg-muted:     #6B6B6B;
  --fg-dim:       #A0A0A0;
  --fg-faint:     #D4D0C8;

  /* ─── خطوط ─── */
  --border:       rgba(0, 0, 0, 0.08);
  --border-soft:  rgba(0, 0, 0, 0.04);
  --border-bold:  rgba(0, 0, 0, 0.16);

  /* ─── رنگ تاکید ─── */
  --accent:       #4A7A8C;
  --accent-soft:  #5A8FA0;
  --accent-dim:   rgba(74, 122, 140, 0.1);
  --accent-glow:  rgba(74, 122, 140, 0.3);
}


/* ───────────────────────────────────────────────────────────
   03. TYPOGRAPHY TOKENS — توکن‌های تایپوگرافی
   ─────────────────────────────────────────────────────────── */

:root {

  /* ─── فونت‌ها ─── */
  --font-display: 'Space Grotesk', 'Manrope', Arial, sans-serif;
  --font-body:    'Inter', 'Manrope', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'DM Mono', monospace;
  --font-fa:      'Estedad', 'Inter', Arial, sans-serif;
  --font-serif:   'Instrument Serif', 'Space Grotesk', serif;

  /* ─── مقیاس فونت ─── */
  --fs-display:   clamp(72px, 15vw, 240px);
  --fs-hero:      clamp(56px, 12vw, 200px);
  --fs-h1:        clamp(48px, 8vw, 120px);
  --fs-h2:        clamp(36px, 5vw, 80px);
  --fs-h3:        clamp(22px, 2.5vw, 36px);
  --fs-h4:        clamp(18px, 1.8vw, 24px);
  --fs-body-lg:   clamp(16px, 1.2vw, 20px);
  --fs-body:      clamp(14px, 1.05vw, 16px);
  --fs-body-sm:   clamp(13px, 0.95vw, 14px);
  --fs-label:     clamp(10px, 0.75vw, 11px);
  --fs-num:       clamp(12px, 0.9vw, 14px);

  /* ─── فاصله حروف ─── */
  --ls-display:   -0.055em;
  --ls-hero:      -0.05em;
  --ls-h:         -0.035em;
  --ls-body:      -0.01em;
  --ls-label:     0.12em;
  --ls-mono:      0.08em;

  /* ─── ارتفاع خط ─── */
  --lh-display:   0.88;
  --lh-hero:      0.9;
  --lh-h:         1.05;
  --lh-body:      1.65;
  --lh-tight:     1.15;
}


/* ───────────────────────────────────────────────────────────
   04. SPACING — فاصله‌ها
   ─────────────────────────────────────────────────────────── */

:root {
  --space-xs:     8px;
  --space-sm:     16px;
  --space-md:     24px;
  --space-lg:     40px;
  --space-xl:     60px;
  --space-2xl:    100px;

  --section-pad-y: clamp(80px, 12vw, 200px);
  --section-pad-x: clamp(20px, 4vw, 60px);
  --block-gap:     clamp(40px, 6vw, 100px);

  --container-max: 1600px;
}


/* ───────────────────────────────────────────────────────────
   05. MOTION — حرکت
   ─────────────────────────────────────────────────────────── */

:root {
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.6, 0, 0.2, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:     0.2s;
  --dur-med:      0.4s;
  --dur-slow:     0.7s;
  --dur-xslow:    1.2s;
}


/* ───────────────────────────────────────────────────────────
   06. SHADOWS — سایه‌ها
   ─────────────────────────────────────────────────────────── */

:root {
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 40px rgba(90, 143, 160, 0.25);
}


/* ───────────────────────────────────────────────────────────
   07. RESET — ریست
   ─────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}


/* ───────────────────────────────────────────────────────────
   08. BASE ELEMENTS — عناصر پایه
   ─────────────────────────────────────────────────────────── */

/* ═══ تیتر غول ═══ */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

/* ═══ تیتر Hero ═══ */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-hero);
}

/* ═══ تیترهای اصلی ═══ */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--ls-h);
  line-height: var(--lh-h);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-h);
  line-height: var(--lh-h);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ═══ متن بدنه ═══ */
p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}

.muted {
  color: var(--fg-muted);
}

/* ═══ برچسب (Label) ═══ */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ═══ مونو ═══ */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

/* ═══ شماره ═══ */
.num {
  font-family: var(--font-mono);
  font-size: var(--fs-num);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--fg-muted);
}

/* ═══ متن تاکیدی ═══ */
em {
  font-style: normal;
  color: var(--accent);
}

/* ═══ سر‌دسته (Italic Serif) ═══ */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* ═══ لینک با خط زیر ═══ */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur-med) var(--ease-out);
}

.link-underline:hover::after {
  width: 100%;
}


/* ───────────────────────────────────────────────────────────
   09. FARSI — تنظیمات فارسی
   ─────────────────────────────────────────────────────────── */

body.fa {
  font-family: var(--font-fa);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.85;
  letter-spacing: 0;
  direction: rtl;
}

/* ═══ همه چیز توی body.fa → Estedad ═══ */
body.fa,
body.fa * {
  font-family: 'Estedad', 'Inter', 'Manrope', Arial, sans-serif;
}

/* ═══ تیترها ═══ */
body.fa .display,
body.fa .hero-title,
body.fa h1,
body.fa h2,
body.fa h3,
body.fa h4 {
  font-family: var(--font-fa);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

/* ═══ استثنا: مونو (شماره، برچسب‌های تکنیکی) ═══ */
body.fa .mono,
body.fa .num,
body.fa .label,
body.fa .section-head .mono,
body.fa .hero-label,
body.fa .hero-index,
body.fa .lb-label,
body.fa .lb-value,
body.fa .process-step-num,
body.fa .service-num,
body.fa .form-status,
body.fa .footer-social a,
body.fa .footer-top {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  letter-spacing: 0.05em;
}

/* ═══ استثنا: کلمه‌های انگلیسی داخل متن فارسی ═══ */
body.fa [dir="ltr"],
body.fa .en {
  font-family: 'Inter', 'Manrope', sans-serif;
}

/* ═══ پاراگراف‌ها ═══ */
body.fa p,
body.fa .statement-intro,
body.fa .hero-intro,
body.fa .service-desc,
body.fa .process-step-content p,
body.fa .about-copy p,
body.fa .project-lead,
body.fa .project-desc p {
  font-family: 'Estedad', sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.9;
  letter-spacing: 0;
}

/* ═══ فیلدهای فرم ═══ */
body.fa input,
body.fa textarea,
body.fa label,
body.fa button {
  font-family: 'Estedad', sans-serif;
  letter-spacing: 0;
}

/* ═══ لینک‌های منو ═══ */
body.fa .nav-links a,
body.fa .mobile-nav a,
body.fa .footer-cta-title,
body.fa .contact-title,
body.fa .statement-title,
body.fa .about-title,
body.fa .hero-name {
  font-family: 'Estedad', sans-serif;
  letter-spacing: 0;
}

/* ═══ ایمیل ═══ */
body.fa .email-text,
body.fa .email-link {
  font-family: 'Inter', 'Manrope', sans-serif;
  direction: ltr;
}

/* ═══ سر‌دسته ═══ */
body.fa .serif {
  font-family: var(--font-fa);
  font-style: normal;
  font-weight: 700;
}


/* ───────────────────────────────────────────────────────────
   10. SELECTION — انتخاب متن
   ─────────────────────────────────────────────────────────── */

::selection {
  background: var(--accent);
  color: var(--bg);
}

::-moz-selection {
  background: var(--accent);
  color: var(--bg);
}


/* ───────────────────────────────────────────────────────────
   11. SCROLLBAR — اسکرول‌بار
   ─────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--fg-faint);
  border-radius: 4px;
  transition: background var(--dur-fast);
}

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


/* ───────────────────────────────────────────────────────────
   12. UTILITIES — کلاس‌های کمکی
   ─────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

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

.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
}


/* ───────────────────────────────────────────────────────────
   13. THEME TRANSITION — انتقال تم
   ─────────────────────────────────────────────────────────── */

/* ═══ انتقال نرم پایه ═══ */
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ═══ غیرفعال کردن transition موقع تغییر تم ═══ */
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: none !important;
}


/* ───────────────────────────────────────────────────────────
   14. MOBILE TAP — حذف flash آبی
   ─────────────────────────────────────────────────────────── */

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a,
button,
[role="button"],
input,
textarea {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ═══ Focus ring برای دسترسی‌پذیری ═══ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ───────────────────────────────────────────────────────────
   15. REDUCED MOTION — احترام به کاربر
   ─────────────────────────────────────────────────────────── */

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