/* پایه: فونت، توکن، ریست، چیدمان — مشترک میان همهٔ صفحات
   تولیدشده از about-me.html — سیستم طراحی: design-system/nariman-yadollahi/MASTER.md */

/* ══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM: design-system/nariman-yadollahi/MASTER.md
   ══════════════════════════════════════════════════════════════════════ */

/* ══ FONTS ══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhFaNum-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhFaNum-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhFaNum-Bold.woff2') format('woff2');
  font-weight: bold;      /* 700 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhFaNum-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ══ TOKENS ═════════════════════════════════════════════════════════ */
:root {
  /* سطوح */
  --color-bg:            #040810;
  --color-surface-1:     #080c0f;
  --color-surface-2:     #0c1117;
  --color-surface-3:     #0f1520;
  --color-border:        #1a2330;
  --color-border-strong: #3a4550;

  /* متن — نسبت‌های کنتراست در MASTER.md §۳ محاسبه شده */
  --color-fg:            #eee9e2;  /* 16.60:1  AAA */
  --color-fg-muted:      #aeb3b4;  /*  9.46:1  AAA */
  --color-fg-subtle:     #737d85;  /*  4.77:1  AA — از #6e7880 روشن شد (۴.۴۵:۱ مردود بود) */

  /* تأکید — قفل‌شده در یادداشت پروژه */
  --color-accent:        #01b8fe;  /*  8.87:1  AAA روی --color-bg */
  --color-on-accent:     #040810;
  --color-accent-dim:    rgba(1,184,254,.18);
  --color-accent-faint:  rgba(1,184,254,.07);
  --color-off:           #aeb3b4;  /* حالت خاموش ریل */

  /* وضعیت */
  --color-danger:        #ff5c5c;  /* 5.94:1 روی --color-bg */
  --color-on-danger:     #040810;

  /* تایپوگرافی */
  --font-sans:   'YekanBakh', system-ui, sans-serif;
  --text-hero:   clamp(1.75rem, 4vw, 3.25rem);
  --text-h1:     clamp(1.375rem, 3.5vw, 2.375rem);
  --text-h2:     clamp(1.25rem, 2.8vw, 2rem);
  --text-h3:     1.1875rem;
  --text-body:   clamp(1rem, 1.2vw, 1.0625rem);
  --text-small:  0.875rem;
  --leading-tight: 1.5;
  --leading-body:  1.9;

  /* وزن‌ها — جبران اندازهٔ نوری:
     در اندازهٔ نمایشی، Bold کم‌جان به نظر می‌رسد → ExtraBold
     در اندازهٔ ریز، Bold سنگین و بسته به نظر می‌رسد → SemiBold */
  --weight-display: 800;    /* تیترهای بزرگ */
  --weight-bold:    bold;   /* تیترهای بخش، اعداد */
  --weight-label:   600;    /* برچسب‌های ریز */
  --weight-body:    normal;

  /* فاصله — Density 3/10 (Spacious) */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 144px;
}

/* ══ RESET ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-weight: normal;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { text-wrap: balance; letter-spacing: 0; }

/* فوکوس صفحه‌کلید — اجباری، MASTER §۸ */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* پرش به محتوا برای کاربران صفحه‌کلید */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  top: -100px;
  z-index: 999;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 6px;
  transition: top .2s;
}
.skip-link:focus { top: var(--space-sm); }

/* فقط برای صفحه‌خوان — مثلاً برچسب فیلدی که placeholder دارد.
   برخلاف skip-link در هیچ حالتی دیده نمی‌شود و به جای والد وابسته
   نیست: skip-link درون عنصری با transform (مثل .reveal) از صفحه بیرون
   نمی‌رود و روی محتوا می‌افتد. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══ LAYOUT ══════════════════════════════════════════════════════════ */
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 36px; }