/* ============================================================
   KARGAH — رنگ‌ها و تایپوگرافی
   برگرفته از سیستم طراحی کارگاه
   ============================================================ */

@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-UltraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-Thin.ttf")      format("truetype"); font-weight: 250; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-Light.ttf")     format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-Regular.ttf")   format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-Medium.ttf")    format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-DemiBold.ttf")  format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-Bold.ttf")      format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../assets/fonts/IRANYekanXFaNum-ExtraBlack.ttf")format("truetype"); font-weight: 950; font-display: swap; }

@font-face { font-family: "IRANYekanX"; src: url("../assets/fonts/IRANYekanX-Light.ttf")     format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IRANYekanX"; src: url("../assets/fonts/IRANYekanX-Regular.ttf")   format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IRANYekanX"; src: url("../assets/fonts/IRANYekanX-Medium.ttf")    format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IRANYekanX"; src: url("../assets/fonts/IRANYekanX-DemiBold.ttf")  format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IRANYekanX"; src: url("../assets/fonts/IRANYekanX-Bold.ttf")      format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IRANYekanX"; src: url("../assets/fonts/IRANYekanX-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --color-white:        #FFFFFF;
  --color-page-bg:      #F2F1F7;
  --color-card-bg:      #F7F6FB;
  --color-border:       #D6DEE8;
  --color-border-light: #E5E7F4;

  --color-text-dark:    #121821;
  --color-text-navy:    #13274F;
  --color-text-primary: #4A556C;
  --color-text-secondary:#64748B;
  --color-text-muted:   #8798B1;

  --color-blue-600:     #0080FF;
  --color-blue-100:     #CCE6FF;
  --color-blue-50:      #EDF6FF;

  --color-green-500:    #00C98D;
  --color-green-700:    #048E87;
  --color-green-100:    #CCF4E8;
  --color-green-50:     #EBFFF9;

  --color-red-500:      #FF4E4E;
  --color-red-50:       #FFEEEE;
  --color-orange-500:   #FF9400;
  --color-orange-100:   #FFE8B8;
  --color-yellow-400:   #FFC043;

  --action-primary-hover: #0070E0;

  --accent: var(--color-blue-600);
  --ink: var(--color-text-dark);
  --body: var(--color-text-navy);
  --cap: var(--color-text-secondary);
  --line: var(--color-border);
  --tint: var(--color-page-bg);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  direction: rtl;
  background: #FFFFFF;
  color: var(--body);
  font-family: "IRANYekanXFaNum", "IRANYekanX", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--action-primary-hover); text-decoration: underline; }

* { box-sizing: border-box; text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary [data-chev] { transform: rotate(180deg); }

@keyframes kargahSeg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kargahStep { from { opacity: .28; } to { opacity: 1; } }

@media (max-width: 900px) { [data-only="wide"] { display: none !important; } }
@media (min-width: 901px) { [data-only="narrow"] { display: none !important; } }
@media (min-width: 720px) { [data-cycle-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }